我试着用jquery做一个对话框。在这个对话框中我将有条款和条件。问题是对话框仅显示第一次。
这是代码。
JavaScript的：
function showTOC()
{
$("#TOC").dialog({
modal: true,
overlay: {
opacity: 0.7,
background: "black"
}
})
}
HTML（a href）：
<a class="TOClink" href="javascript:showTOC();">View Terms & Conditions</a>
<div id="example" title="Terms & Conditions">1..2..</div>
我认为问题在于，当您关闭对话框时，DIV会从html代码中销毁，因此它永远不会再显示在屏幕上。
你能帮忙吗？
由于
答案 0 :(得分：64)
我遇到了同样的问题（对话框只打开一次，关闭后，它不会再打开），并尝试了上面的解决方案，但没有解决我的问题。我回到了文档，意识到我对对话框的工作方式有一个根本的误解。
$（'＃myDiv'）。dialog（）命令创建/实例化对话框，但不一定是打开它的正确方法。打开它的正确方法是使用dialog（）实例化对话框，然后使用对话框（'open'）显示它，并使用对话框（'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>
答案 1 :(得分：25)
您发布的代码似乎存在问题。您显示T＆amp; 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>
答案 2 :(得分：14)
我遇到了同样的问题，并且正在寻找一种方法解决它，这让我来到这里。在回顾了RaeLehman提出的建议后，它引导我找到了解决方案。这是我的实施。
在我的$（document）.ready事件中，我将autoOpen设置为false初始化对话框。我还选择将click事件绑定到一个元素，比如一个按钮，它将打开我的对话框。
$(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中测试了它，它运行正常。希望这有帮助！
答案 3 :(得分：2)
如果您需要在一个页面上使用多个对话框并打开，关闭并重新打开它们，则以下情况很有效：
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;
}
答案 4 :(得分：1)
<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>
答案 5 :(得分：1)
RaeLehman的解决方案适用于您只想生成对话框的内容一次（或仅使用javascript修改它）。如果你真的想每次都重新生成对话框（例如，使用视图模型类和Razor），那么你可以用$（“。ui-dialog-titlebar-close”）关闭所有对话框.Click（）;并将autoOpen设置为其默认值true。
答案 6 :(得分：0)
这更加简洁，并且允许您根据不同的点击事件获得不同的对话框值等：
$('#click_link').live("click",function() {
$("#popup").dialog({modal:true, width:500, height:800});
$("#popup").dialog("open");
return false;
});
答案 7 :(得分：0)
我的解决方案：删除一些初始化选项（例如show），因为如果某些东西不起作用，构造函数不会产生（前幻灯片效果）。 我的函数没有动态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;
}
答案 8 :(得分：0)
即使我遇到类似的问题。这就是我能够解决同样的问题。
$("#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;
});
答案 9 :(得分：0)
如果要更改所有对话框的不透明度，请在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);
}