我有2个标签和2个标签内容。 我在每个选项卡上都有一个按钮来打开一个jquery对话框 我想确保当我打开对话框1时，我仍然可以在不关闭对话框的情况下导航到Tab2 我包含了我的代码示例 JSFiddle
enter code here
$("#tabs").tabs({
activate: function (event, ui) {
var active = $('#tabs').tabs('option', 'active');
$("#tabid").html('the tab id is ' + $("#tabs ul>li a").eq(active).attr("href"));
}
}
);
$(document).ready(function () {
//$('#dialog').dialog();
$('#dialog_link').click(function () {
$('#dialog-message').dialog('open');
return false;
});
});
$("#dialog-message").dialog({
modal: true,
autoOpen: false,
draggable: true,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
position: {
"my": "right top+20",
"at": "left top",
"of": $("#form1")
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a>
</li>
<li><a href="#tabs-2">Tab 2</a>
</li>
</ul>
<div id="tabs-1">
<div id="form1">
The dialog should start from here letting the abbility to go to Tab2. The nodal should only cover this content:
<h1> Content for Tab 1</h1>
<button id="dialog_link" type="button">Click Me!</button>
<H1>This is some content</H1>
<H1>This is some content</H1>
<H1>This is some content</H1>
</div>
</div>
<div id="tabs-2">
<div id="form2">Content for Tab 2
<H1>This is some content tab2</H1>
<H1>This is some content tab2</H1>
<H1>This is some content tab2</H1> <H1>This is some content tab2</H1> <H1>This is some content tab2</H1> <H1>This is some content tab2</H1> <H1>This is some content tab2</H1> <H1>This is some content tab2</H1> <H1>This is some content tab2</H1>
</div>
</div>
</div>
<div id="dialog-message" title="Important information" style="overflow: hidden;">
<p style="margin-left: 23px;">
I am popup for form1 Tab1
</p>
</div>
<div id="tabid"></div>
答案 0 :(得分：1)
您需要隐藏模态backdrop。在你的CSS中添加它，虽然我不确定你想要做什么：
.ui-widget-overlay{
display:none;
}