jQuery 单击按钮弹出表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3945216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pop up form on button click
提问by yogsma
Is there a way to create a form in pop-up window on click of a button using jquery? Form will have few input fields and 'Save' & 'Cancel' buttons. So on clicking 'Save', the information in form will be saved in database and will be back to original screen. I would like to have a fade-in pop up window.
有没有办法在使用 jquery 单击按钮时在弹出窗口中创建表单？表单将有几个输入字段和“保存”和“取消”按钮。所以点击“保存”后，表单中的信息将保存在数据库中，并返回到原始屏幕。我想要一个淡入的弹出窗口。
回答by Lorenzo
Use this code
使用此代码
HTML
HTML
<div id="divdeps" style="display:none" title=""></div>
Jquery on DOM ready
DOM 上的 Jquery 准备好了
$("#divdeps").dialog({
autoOpen: false,
show: 'slide',
resizable: false,
position: 'center',
stack: true,
height: 'auto',
width: 'auto',
modal: true
});
This code will initialize a Dialog and put it in state ready to be open and successively closed. If you want to open the dialog when the page loads then add this line of code just after the code you've already added in document ready:
此代码将初始化一个 Dialog 并将其置于准备打开和连续关闭的状态。如果您想在页面加载时打开对话框，请在您已经在文档中添加的代码之后添加这行代码：
$("#divdeps").dialog('open');
If instead you want to open the Dialog following a click event add the same code on the click event of the element that should fire the opening.
相反，如果您想在单击事件后打开对话框，请在应该触发打开的元素的单击事件上添加相同的代码。
Add your form inside the myDialog DIV. If you need more help regarding the form submission just give us more details...
在 myDialog DIV 中添加您的表单。如果您需要有关表单提交的更多帮助，请向我们提供更多详细信息...
回答by tpow
Find JQuery UI dialog.
查找 JQuery UI 对话框。
Create a div with your form in it:
用你的表单创建一个 div：
<div id=form>
your form here
</div>
Then call a dialog instance (probaby link this is some sort of click handler to trigger form)
然后调用一个对话框实例（可能链接这是某种触发表单的点击处理程序）
$('#form').dialog({
modal: true,
buttons:
{ "Cancel": function() {
$(this).dialog("close")
},
"Submit": function() {
//put code here for form submission
}
});
回答by David
Here is an example using JQuery. You can check other types of popup Dialogin details.
这是一个使用 JQuery 的示例。您可以详细检查其他类型的弹出对话框。
<!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>
回答by casablanca
Have a look at the the jQuery UI Dialog. It does exactly what you want, and can be configured to add animations such as fade-in.
查看jQuery UI 对话框。它完全符合您的要求，并且可以配置为添加淡入等动画。
回答by Salik
I am using following popup box which looks more appealing.
我正在使用以下看起来更吸引人的弹出框。
