jQuery对话框
我试图做一个对话框与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>
我想这个问题是，当你closures对话框时，DIV被从HTML代码中销毁，因此它永远不会再被显示在屏幕上。
你能帮忙吗？
谢谢
看起来像你发布的代码有问题。 显示T＆C的function是引用了错误的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>
我遇到了同样的问题（对话框只能打开一次，closures后，它不会再次打开），并试图解决上述问题没有解决我的问题。 我回到了文档，并意识到我对这个对话框的工作原理有一个基本的误解。
$（'＃myDiv'）。dialog（）命令创build/实例化对话框，但不一定是打开它的正确方法。 打开它的正确方法是使用dialog（）实例化对话框，然后使用对话框（“打开”）显示对话框，使用对话框（“closures”）closures/隐藏对话框。 这意味着你可能想要将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>
我有同样的问题，并正在寻找一种方法来解决它，把我带到这里。 在回顾RaeLehman提出的build议后，我find了解决办法。 这是我的实现。
在$（document）.ready事件中，我初始化我的对话框，并将autoOpen设置为false。 我还select了将一个点击事件绑定到一个元素，就像一个button，这将打开我的对话框。
$(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"); } }
顺便说一下，我testing了这个IE7和Firefox，它工作正常。 希望这可以帮助！
如果您需要在一个页面上使用多个对话框并打开，closures并重新打开它们，以下方法可以很好地工作：
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; }
RaeLehman的解决scheme，如果你只想生成一次对话框的内容（或只使用JavaScript修改它）的工作。 如果你真的想每次重新生成对话框（例如，使用视图模型类和Razor），那么你可以使用$（“。ui-dialog-titlebar-close”）closures所有的对话框。 并将autoOpen设置为默认值true。
<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>
这是一个更简洁一些，也可以让你有不同的对话框值，基于不同的点击事件：
$('#click_link').live("click",function() { $("#popup").dialog({modal:true, width:500, height:800}); $("#popup").dialog("open"); return false; });
我的解决scheme：删除一些初始化选项（例如显示），因为构造函数不产生，如果有什么不工作（幻灯片效果）。 我的function没有dynamichtml插入：
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); }
