Question

我有这个单独的html页面，我想打开对话点击按钮，这可能吗？我们怎么能这样做？

<div id="dialog-form" title="Change Password"> 
      <form>
        <div class="border">
          <label for="oldPassword">Old Password</label>
          <input type="password" id ="oldPassword" placeholder="Enter Old Password">
          <label for="newPassword">New Password</label>
          <input type="password" id="newPassword" placeholder="Enter New Password">
          <label for="retypePassword">Retype Password</label>
          <input type="password" id="retypePassword" placeholder="Enter Retype password">
        </div>
          <div class="buttons">
            <button id="submit">Submit</button>
            <button id="cancel">Cancel</button>
         </div>
      </form>
    </div>

Answer 1

对于这样的想法，我建议使用像JQuery UI这样的样式框架。

非常简单易用的设置：

对于您的示例，您将使用：

<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
    $(function() {
        $( "#dialog-form" ).dialog();
    });
  </script>
</head>

<div id="dialog-form" title="Change Password"> 
  <form>
    <div class="border">
      <label for="oldPassword">Old Password</label>
      <input type="password" id ="oldPassword" placeholder="Enter Old Password">
      <label for="newPassword">New Password</label>
      <input type="password" id="newPassword" placeholder="Enter New Password">
      <label for="retypePassword">Retype Password</label>
      <input type="password" id="retypePassword" placeholder="Enter Retype password">
    </div>
      <div class="buttons">
        <button id="submit">Submit</button>
        <button id="cancel">Cancel</button>
     </div>
  </form>
</div>

看看这个：https://jqueryui.com/dialog/

编辑：

正如Robert指出您可能需要从另一个内容页面打开对话框，您可以使用带有回调的jQuery.load()方法打开对话框：

$('#dialog-form').load('path-to-my-page', function() { $('#dialog-form).dialog('open'); });

Answer 2

是的，请看下面的链接来实现这一点，非常简单：

link

因为你不想使用jquery mobile pop up

这样做：

$('#dialog-form').click(function(){
  window.open('url', 'window name', 'window settings');
  return false;
});

在网址，粘贴html文件的链接，并且，你可以命名你的窗口，并添加其他设置，如身高，宽度等，如果你的答案很好，你可以投赞成票，谢谢你：）

Answer 3

您想要创建一个对话框，并通过单击不同的按钮添加不同的HTML代码？

1.创建一个div，让它看起来像一个对话框。不要显示它。

<div id="dialog-form" title="Change Password" style="display: none;"> </div>

2.定义这样的变量：

var html = '<form>' +
    '<div class="border">' +
      '<label for="oldPassword">Old Password</label>' +
      '<input type="password" id ="oldPassword" placeholder="Enter Old Password">' +
      '<label for="newPassword">New Password</label>' +
      '<input type="password" id="newPassword" placeholder="Enter New Password">' +
      '<label for="retypePassword">Retype Password</label>' +
      '<input type="password" id="retypePassword" placeholder="Enter Retype password">' +
    '</div>' +
    '<div class="buttons">' +
      '<button id="submit">Submit</button>' +
      '<button id="cancel">Cancel</button>' +
    '</div>' +
'</form>';

3.在点击处理程序中添加$('#dialog-form').html(html).css('display', 'block');。

您也可以通过$('#dialog-form').html('').css('display', 'none');隐藏对话框。

Answer 4

使用bootstrap轻松打开按钮单击对话框。

如果您为项目使用模板，并且想要在按钮上单击打开对话框，则有时jquery对话框不能提供正确的输出作为我的经验，因此我使用bootstrap对话框（模型）。

<div class="container">
   <h2>Small Modal</h2>
   <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#dialog-form">Change Password</button>

   <div id="dialog-form" title="Change Password" class="modal fade" role="dialog">
     <div class="modal-dialog modal-sm">
      <div class="modal-content">
      <form>
      <div class="border">
        <label for="oldPassword">Old Password</label>
        <input type="password" id ="oldPassword" placeholder="Enter Old Password">
        <label for="newPassword">New Password</label>
        <input type="password" id="newPassword" placeholder="Enter New Password">
        <label for="retypePassword">Retype Password</label>
        <input type="password" id="retypePassword" placeholder="Enter Retype password">
      </div>
      <div class="buttons">
        <button id="submit">Submit</button>
        <button id="cancel">Cancel</button>
      </div>
      </form>
      </div>
    </div>
  </div>
</div>

如何在对话框中加载html页面并打开弹出窗口

4 个答案: