我试图用 jquery 做一个对话框。在此对话框中，我将有条款和条件。问题是该对话框仅在第一次显示。
这是代码。
JavaScript：
function showTOC()
{
$("#TOC").dialog({
modal: true,
overlay: {
opacity: 0.7,
background: "black"
}
})
}
HTML（一个href）：
<a class="TOClink" href="javascript:showTOC();">View Terms & Conditions</a>
<div id="example" title="Terms & Conditions">1..2..</div>
我认为的问题是，当您关闭对话框时，DIV 会从 html 代码中销毁，因此它永远无法再次显示在屏幕上。
你能帮忙吗！
谢谢
我遇到了同样的问题（对话框只会打开一次，关闭后就不会再次打开），并尝试了上面的解决方案，但没有解决我的问题。我回到文档并意识到我对对话框的工作原理有一个根本的误解。
$('#myDiv').dialog() 命令创建/实例化对话框，但不一定是打开它的正确方法。打开它的正确方法是使用 dialog() 实例化对话框，然后使用 dialog('open') 显示它，并使用 dialog('close') 关闭/隐藏它。这意味着您可能希望将 autoOpen 选项设置为 false。
所以过程是：在文档准备好时实例化对话框，然后监听单击或您想要显示对话框的任何操作。然后它会工作，一次又一次！
<script type="text/javascript">
jQuery(document).ready( function(){
jQuery("#myButton").click( showDialog );
//variable to reference window
$myWindow = jQuery('#myDiv');
//instantiate the dialog
$myWindow.dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Hello World',
overlay: { opacity: 0.5, background: 'black'}
});
}
);
//function to show dialog
var showDialog = function() {
//if the contents have been hidden with css, you need this
$myWindow.show();
//open the dialog
$myWindow.dialog("open");
}
//function to close dialog, probably called by a button in the dialog
var closeDialog = function() {
$myWindow.dialog("close");
}
</script>
</head>
<body>
<input id="myButton" name="myButton" value="Click Me" type="button" />
<div id="myDiv" style="display:none">
<p>I am a modal dialog</p>
</div>
看起来您发布的代码有问题。您显示 T&C 的功能引用了错误的 div id。加载文档后，您还应该考虑将 showTOC 函数分配给 onclick 属性：
$(document).ready({
$('a.TOClink').click(function(){
showTOC();
});
});
function showTOC() {
$('#example').dialog({modal:true});
}
使用 jQuery UI 对话框实现所需效果的更简洁示例是：
<div id="terms" style="display:none;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<a id="showTerms" href="#">Show Terms & Conditions</a>
<script type="text/javascript">
$(document).ready(function(){
$('#showTerms').click(function(){
$('#terms').dialog({modal:true});
});
});
</script>
我有同样的问题，正在寻找一种方法来解决它，这让我来到了这里。在查看了 RaeLehman 提出的建议后，我找到了解决方案。这是我的实现。
在我的 $(document).ready 事件中，我使用 autoOpen 设置为 false 来初始化我的对话框。我还选择将单击事件绑定到一个元素，例如一个按钮，这将打开我的对话框。
$(document).ready(function(){
// Initialize my dialog
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"OK":function() { // do something },
"Cancel": function() { $(this).dialog("close"); }
}
});
// Bind to the click event for my button and execute my function
$("#x-button").click(function(){
Foo.DoSomething();
});
});
接下来，我确保定义了该函数，这就是我实现对话框打开方法的地方。
var Foo = {
DoSomething: function(){
$("#dialog").dialog("open");
}
}
顺便说一句，我在 IE7 和 Firefox 中对此进行了测试，效果很好。希望这可以帮助！
如果您需要在一个页面上使用多个对话框并打开、关闭并重新打开它们，则以下操作效果很好：
JS CODE:
$(".sectionHelp").click(function(){
$("#dialog_"+$(this).attr('id')).dialog({autoOpen: false});
$("#dialog_"+$(this).attr('id')).dialog("open");
});
HTML:
<div class="dialog" id="dialog_help1" title="Dialog Title 1">
<p>Dialog 1</p>
</div>
<div class="dialog" id="dialog_help2" title="Dialog Title 2">
<p>Dialog 2 </p>
</div>
<a href="#" id="help1" class="sectionHelp"></a>
<a href="#" id="help2" class="sectionHelp"></a>
CSS:
div.dialog{
display:none;
}
<script type="text/javascript">
// Increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$('#dialog1').dialog({
autoOpen: false,
show: 'blind',
hide: 'explode'
});
$('#Wizard1_txtEmailID').click(function() {
$('#dialog1').dialog('open');
return false;
});
$('#Wizard1_txtEmailID').click(function() {
$('#dialog2').dialog('close');
return false;
});
//mouseover
$('#Wizard1_txtPassword').click(function() {
$('#dialog1').dialog('close');
return false;
});
});
/////////////////////////////////////////////////////
<div id="dialog1" title="Email ID">
<p>
(Enter your Email ID here.)
<br />
</p>
</div>
////////////////////////////////////////////////////////
<div id="dialog2" title="Password">
<p>
(Enter your Passowrd here.)
<br />
</p>
</div>
如果您只想生成一次对话框的内容（或仅使用 javascript 修改它），RaeLehman 的解决方案就可以工作。如果您确实想每次都重新生成对话框（例如，使用视图模型类和 Razor），那么您可以使用 $(".ui-dialog-titlebar-close").click(); 关闭所有对话框。并将 autoOpen 设置为其默认值 true。
这更简洁一点，还允许您根据不同的点击事件拥有不同的对话框值等：
$('#click_link').live("click",function() {
$("#popup").dialog({modal:true, width:500, height:800});
$("#popup").dialog("open");
return false;
});
我的解决方案：删除一些初始化选项（例如显示），因为如果某些东西不工作（例如幻灯片效果），构造函数不会产生。我的函数没有动态 html 插入：
function ySearch(){ console.log('ysearch');
$( "#aaa" ).dialog({autoOpen: true,closeOnEscape: true, dialogClass: "ysearch-dialog",modal: false,height: 510, width:860
});
$('#aaa').dialog("open");
console.log($('#aaa').dialog("isOpen"));
return false;
}
甚至我也面临类似的问题。这就是我能够解决相同问题的方法
$("#lnkDetails").live('click', function (e) {
//Create dynamic element after the element that raised the event. In my case a <a id="lnkDetails" href="/Attendance/Details/2012-07-01" />
$(this).after('<div id=\"dialog-confirm\" />');
//Optional : Load data from an external URL. The attr('href') is the href of the <a> tag.
$('#dialog-confirm').load($(this).attr('href'));
//Copied from jQueryUI site . Do we need this?
$("#dialog:ui-dialog").dialog("destroy");
//Transform the dynamic DOM element into a dialog
$('#dialog-confirm').dialog({
modal: true,
title: 'Details'
});
//Prevent Bubbling up to other elements.
return false;
});
如果您想更改所有对话框的不透明度，请更改 jquery-ui.css
/* Overlays */
.ui-widget-overlay
{
background: #5c5c5c url(images/ui-bg_flat_50_5c5c5c_40x100.png) 50% 50% repeat-x;
opacity: .50;
filter: Alpha(Opacity=80);
}