单击按钮时弹出表单答案

【问题标题】：Pop up form on button click单击按钮时弹出表单
【发布时间】：2011-04-26 02:30:09
【问题描述】：

有没有办法在使用 jquery 单击按钮时在弹出窗口中创建表单？表单将有几个输入字段和“保存”和“取消”按钮。因此，点击“保存”后，表格中的信息将保存在数据库中并返回原始屏幕。我想要一个淡入弹出窗口。

【问题讨论】：

【解决方案1】：

这是一个使用 JQuery 的示例。其他类型弹窗Dialog可以详细查看。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
  } );
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="opener">Open Dialog</button>


</body>
</html>

【讨论】：

【解决方案2】：

我正在使用以下看起来更吸引人的弹出框。

http://gristmill.github.io/jquery-popbox/

【讨论】：

【解决方案3】：

使用此代码

HTML

<div id="divdeps" style="display:none" title=""></div>

DOM 上的 Jquery 准备就绪

$("#divdeps").dialog({
    autoOpen: false,
    show: 'slide',
    resizable: false,
    position: 'center',
    stack: true,
    height: 'auto',
    width: 'auto',
    modal: true
});

此代码将初始化一个对话框，并将其置于准备打开和连续关闭的状态。如果你想在页面加载时打开对话框，那么在你已经添加到文档准备好的代码之后添加这行代码：

$("#divdeps").dialog('open');

如果您想在单击事件之后打开对话框，请在应该触发打开的元素的单击事件上添加相同的代码。

在 myDialog DIV 中添加您的表单。如果您需要有关表单提交的更多帮助，请向我们提供更多详细信息...

【讨论】：

这是我的 jquery 代码： $(document).ready(function(){$('#divdeps').dialog({autoOpen:false,show:'slide',resizeable:true ,position:'center',modal:true});}); ...它不工作。
@yogsma：请在我的回答末尾查看我的编辑。另外，请您的代码中有拼写错误resizeable 应该是resizable。希望对您有所帮助！
@yogsma：这是一个工作示例，与答案中的工作示例完全相同。如果它不起作用，则可能是您的代码中出现了其他问题。请发布更多代码以获得更多帮助。 http://jsbin.com/ugetu3

【解决方案4】：

查找 JQuery UI 对话框。

创建一个包含表单的 div：

<div id=form>
 your form here
</div>

然后调用一个对话框实例（可能的链接这是某种点击处理程序来触发表单）

                       $('#form').dialog({
                            modal: true,
                            buttons:
                          { "Cancel": function() {
                              $(this).dialog("close")
                          },
                              "Submit": function() {
                               //put code here for form submission
                           }
                       });

【讨论】：

此代码只能运行一次。如果您关闭对话框，您将永远无法重新打开它... ;) 请查看http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

【解决方案5】：

看看jQuery UI Dialog。它完全符合您的要求，并且可以配置为添加淡入等动画。

【讨论】：

【解决方案6】：

How to generate a simple popup using jQuery

【讨论】：