jQuery 对话框弹出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10867077/
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
jQuery dialog popup
提问by rj2700
I am trying to get this dialog popup form to show up when this link is clicked but it does not work for me. I've been working on this for the past three hours and this is getting too frustrating for me.
我试图让这个对话框弹出表单在单击此链接时显示，但它对我不起作用。过去三个小时我一直在研究这个，这对我来说太令人沮丧了。
Here's my HTML:
这是我的 HTML：
<a href="#" id="contactUs">Contact Us</a>
<div id="dialog" title="Contact form">
<p>appear now</p>
</div>
And here's my JavaScript, this is in an external file:
这是我的 JavaScript，这是在一个外部文件中：
$("#contactUs").click(function() {
$("#dialog").dialog("open");
return false;
});
I've used these links, but to no avail for me:
我已经使用了这些链接，但对我无济于事：
Please let me know if have an ideas, much appreciated, thanks.
请让我知道如果有想法，非常感谢，谢谢。
回答by Andy Jones
This HTML is fine:
这个 HTML 很好：
<a href="#" id="contactUs">Contact Us</a>
<div id="dialog" title="Contact form">
<p>appear now</p>
</div>
You need to initialize the Dialog (not sure if you are doing this):
您需要初始化对话框（不确定您是否这样做）：
$(function() {
// this initializes the dialog (and uses some common options that I do)
$("#dialog").dialog({
autoOpen : false, modal : true, show : "blind", hide : "blind"
});
// next add the onclick handler
$("#contactUs").click(function() {
$("#dialog").dialog("open");
return false;
});
});
回答by Ricardo Souza
Your problem is on the call for the dialog
您的问题在于对话的呼叫
If you dont initialize the dialog, you don't have to pass "open" for it to show:
如果您不初始化对话框，则不必通过“打开”来显示：
$("#dialog").dialog();
Also, this code needs to be on a $(document).ready();function or be below the elements for it to work.
此外，此代码需要在$(document).ready();函数上或在元素下方才能工作。
回答by Mohit Sharma
Use below Code, It worked for me.
使用下面的代码，它对我有用。
<script type="text/javascript">
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#contactUs').click(function () {
$('#dialog').dialog('open');
});
});
</script>
回答by Michael Martin
It's quite simple, first HTML must be added:
很简单，首先必须添加HTML：
<div id="dialog"></div>
Then, it must be initialized:
然后，它必须被初始化：
<script type="text/javascript">
jQuery( document ).ready( function() {
jQuery( '#dialog' ).dialog( { 'autoOpen': false } );
});
</script>
After this you can show it by code:
在此之后，您可以通过代码显示它：
jQuery( '#dialog' ).dialog( 'open' );
回答by Rameshbl
You can use the following script. It worked for me
您可以使用以下脚本。它对我有用
The modal itself consists of a main modal container, a header, a body, and a footer. The footer contains the actions, which in this case is the OK button, the header holds the title and the close button, and the body contains the modal content.
模态本身由主模态容器、页眉、正文和页脚组成。页脚包含操作，在本例中为 OK 按钮，页眉包含标题和关闭按钮，正文包含模式内容。
$(function () {
modalPosition();
$(window).resize(function () {
modalPosition();
});
$('.openModal').click(function (e) {
$('.modal, .modal-backdrop').fadeIn('fast');
e.preventDefault();
});
$('.close-modal').click(function (e) {
$('.modal, .modal-backdrop').fadeOut('fast');
});
});
function modalPosition() {
var width = $('.modal').width();
var pageWidth = $(window).width();
var x = (pageWidth / 2) - (width / 2);
$('.modal').css({ left: x + "px" });
}
回答by Krishna
You can check this link: http://jqueryui.com/dialog/
您可以查看此链接：http: //jqueryui.com/dialog/
This code should work fine
这段代码应该可以正常工作
$("#dialog").dialog();
