jQuery 对话框答案

【问题标题】：jQuery Dialog BoxjQuery 对话框
【发布时间】：2010-09-26 20:55:57
【问题描述】：

我试图用 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 代码中销毁，因此它永远无法再次显示在屏幕上。

你能帮忙吗！

谢谢

【问题讨论】：

标签： javascript jquery jquery-ui dialog

【解决方案1】：

我遇到了同样的问题（对话框只会打开一次，关闭后就不会再次打开），并尝试了上面的解决方案，但没有解决我的问题。我回到文档并意识到我对对话框的工作原理有一个根本的误解。

$('#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>

【讨论】：

帮帮我，我的问题是我在 click() 处理程序中实例化对话框，因此无法在代码的其他地方打开。

【解决方案2】：

您发布的代码似乎存在问题。您显示 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>

【讨论】：

我 100% 同意你的看法。我认为如何在同一页面中显示目录有不同的方式。问题是所有 TOC 都在显示，因为它们位于 DIV 语句中。有没有什么办法只有当有人点击链接按钮时才显示DIV？
查看我刚刚添加的第二个示例。
我试过了（复制并粘贴你的代码，但对话框中没有显示“LOREM...” 2。单击链接后会出现对话框，然后当我单击关闭按钮，然后我再次单击链接以再次查看 TOC 对话框没有出现...你能帮帮我吗:(？
删除样式="display:none;"属性。

【解决方案3】：

我遇到了同样的问题，正在寻找解决方法，这让我来到了这里。在查看了 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 中对此进行了测试，效果很好。希望这会有所帮助！

【讨论】：

【解决方案4】：

如果您需要在一页上使用多个对话框并打开、关闭和重新打开它们，则以下方法效果很好：

 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;
    }

【讨论】：

【解决方案5】：

如果您只想生成一次对话框的内容（或只使用 javascript 修改它），RaeLehman 的解决方案就可以工作。如果您确实想每次都重新生成对话框（例如，使用视图模型类和 Razor），那么您可以使用 $(".ui-dialog-titlebar-close").click(); 关闭所有对话框并将 autoOpen 设置为其默认值 true。

【讨论】：

【解决方案6】：

<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>

【讨论】：

【解决方案7】：

这样更简洁一些，还允许你根据不同的点击事件有不同的对话框值等：

$('#click_link').live("click",function() {
    $("#popup").dialog({modal:true, width:500, height:800});

    $("#popup").dialog("open");

    return false;
});

【讨论】：

【解决方案8】：

我的解决方案：删除一些初始化选项（例如显示），因为如果某些东西不工作（例如幻灯片效果），构造函数不会产生。我的函数没有动态 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;
}

【讨论】：

【解决方案9】：

即使我也遇到过类似的问题。这就是我能够解决相同问题的方法

    $("#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;
    });

【讨论】：

【解决方案10】：

如果您想更改所有对话框的不透明度，请在 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);
}

【讨论】：