•  21-08-2019
  •  | 
  •  

题

我试着去做一个对话框！在这个对话框我有条款和条件。问题是，对话框仅显示对于第一次。

这是码。

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代码，因此它永远不可能再次显示在屏幕上。

可以请你的帮助！

感谢

有帮助吗？

解决方案

看起来像有一个与您发布的代码的问题。你的函数来显示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 &amp; Conditions</a>      
   <script type="text/javascript">
       $(document).ready(function(){
           $('#showTerms').click(function(){
               $('#terms').dialog({modal:true});   
           });
       });
   </script>

其他提示

我遇到了同样的问题（对话会只开一次，关闭后，不会再次打开），并尝试了上述这并没有解决我的问题解决方案。我又回到了文档和意识到我有多么的对话框作品的一个根本性的误解。

在$（ '＃myDiv'）。对话框（）命令创建/实例化的对话框中，但不一定是为开它的正确方法。打开它的正确方法是实例与对话（）的对话框，然后使用对话框（“公开”）进行显示，并且对话框（“亲密”），关闭/隐藏它。这意味着你可能会想设置的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提出的建议后，它使我的解决方案。下面是我的实现。

在我的$（document）。就绪事件我初始化我用的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测试这和它工作正常。希望这有助于！

如果你需要一个网页和开，关上使用多个对话框，并重新打开了以下工作很好：

 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的解决方案作品，如果你只是想一次生成对话框的内容（或仅使用JavaScript修改）。如果你真的想每次重新生成对话框（例如，使用视图模型类和剃刀），那么你就可以关闭所有的对话与$点击（）（“UI-对话框的标题栏关闭。”）。和离开的AutoOpen集到的真实为其缺省值。

<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事件有不同的对话值等：

$('#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);
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top