jQueryUi 1.11在Firefox中堆叠模态对话框

时间:2014-10-07 08:39:23

标签: jquery jquery-ui firefox modal-dialog jquery-dialog

我对jQuery很新,我在Firefox中堆叠2个模态对话框时遇到问题(Chrome中没有问题)。

当通过第一个对话框上的按钮打开第二个模态对话框时,它不会“禁用”第一个模式对话框,我仍然可以单击第一个模态对话框,如果我这样做,第二个对话框将被第一个对话框覆盖之一。

问题是,如果我点击按钮,打开第二个模态对话框,两次,关闭对话框并通过按钮单击重新打开它按预期工作(即我可以访问第二个模态对话框但是不是第一个)。

我认为这些都是相关的代码部分:

HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <title></title>
    <script src = "js/jquery-1.11.1.js"></script>
    <script src = "js/jquery-ui.js"></script>
    <link rel = "stylesheet" href = "css/wizard.css">
    <link rel = "stylesheet" href = "../css/jquery-ui-1.8.11.custom.css">
    <link rel = "stylesheet" href = "css/spectrum.css">
    <script src = "js/spectrum.js"></script>
    <script src = "../java.js"></script>
    <script src = "js/wizard.js"></script>

<body>


 <div id="PopUpTip" class="dialog ui-dialog-content ui-front"   style="position:relative; height:auto; width: 1280px;">
 </div>

    <div id="dialog_wizard" class="dialog ui-dialog-content ui-front" style="position:relative;">
        <div class = "quicktip">
            ?<span hidden>blabla</span>
        </div>
    </div>
</body>

jQuery的:

jQuery.noConflict();
jQuery(document).ready(function () {
    jQuery('#dialog_wizard').dialog({
        autoOpen: true,
        modal: true,
        width: '840',
        height: 'auto',
        title: 'Wizard',

        open: function (event, ui) {
            jQuery('.ui-dialog-titlebar .ui-icon').css({
                top: 0,
                left: 0
            });
            jQuery('#dialog_wizard').dialog('widget').position({
                my: "top",
                at: "top",
                of: window
            });
        },
        close: function () {
            //abbrechen();
        }
    });



    jQuery('#dialog_wizard').dialog('open');


    jQuery('#PopUpTip').dialog({
        autoOpen: false,
        modal: true,
        title: "QuickTip",
        width: '720',
        resizable: false,
        stack: true,
        open: function (event, ui) {
            jQuery('.ui-dialog-titlebar .ui-icon').css({
                top: 0,
                left: 0
            });
            jQuery(this).dialog('widget').position({
                my: 'center',
                at: 'center',
                of: jQuery('#dialog_wizard')
            });
        }
    });

    jQuery('#PopUpTip').bind("dialogclose", function (event, ui) {
        //jQuery('#theContent').html();
    });

    function setContent(text)
    {
        jQuery('#theContent').html(text);
        jQuery('#PopUpTip').dialog("option");
        jQuery('#PopUpTip').dialog("open");
        jQuery('.ui-widget-overlay').click(function()
        {
            jQuery('#PopUpTip').dialog('close');
        });
    };

    jQuery(document).on("click",".quicktip",function()
    {
        setContent(jQuery(this).children(':first-child').text());
    });
}

0 个答案:

没有答案