按钮点击弹出窗体

有没有一种方法可以在弹出窗口中使用jquery点击按钮来创建窗体？表格将会有很少的输入字段，'Save'&'取消'按钮。因此，点击“保存”后，表单中的信息将被保存在数据库中，并将返回原始屏幕。我想有一个淡入弹出窗口。按钮点击弹出窗体

2010-10-15 yogsma

使用此代码

HTML

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

在DOM准备

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

该代码将初始化一个对话框，并把它放在状态随时可以打开和关闭先后jQuery的

。如果你想打开的对话框中加载页面时则只是你已经在准备文件中添加代码之后添加此行的代码：

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

相反，如果你想打开的对话框下面单击事件在应该触发开口的元素的click事件上添加相同的代码。

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

来源

2010-10-15 19:01:36 Lorenzo

这是我的jQuery代码：$（文件）。就绪（函数（）{$（ '＃divdeps'）对话框（{的AutoOpen：假的，显示： '幻灯片'，可调整大小：真实，位置： '中心'，模态：真}）;}）; ...它不工作。 – yogsma 2010-10-15 20:01:13

@ yogsma：请在我的回答结束时看看我的编辑。另外，请在代码中使用拼写错误，“可调整大小”应为“可调整大小”。希望能帮助到你！ – Lorenzo 2010-10-15 20:17:39

我已经尝试了一切，它不工作。 – yogsma 2010-10-15 21:27:47

How to generate a simple popup using jQuery

来源

2010-10-15 18:59:36 Alex

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

来源

2010-10-15 19:00:35 casablanca

查找JQuery UI对话框。

在它创建表单一个div：

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

然后再打一个对话实例（probaby链接，这是某种形式的点击处理程序来触发形式）

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

来源

2010-10-15 19:03:23 tpow

此代码只能工作一次。如果关闭对话框，您将永远无法重新打开它;;请查看'http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui - 对话/' – Lorenzo 2010-10-15 19:07:44

我使用以下弹出框看起来更有吸引力。

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

来源

2013-08-25 17:19:34 Salik

这里是一个使用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>

来源

2016-09-30 03:13:02 David

按钮点击弹出窗体

回答

相关问题