我对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());
});
}