Question

我有2个标签和2个标签内容。我在每个选项卡上都有一个按钮来打开一个jquery对话框我想确保当我打开对话框1时，我仍然可以在不关闭对话框的情况下导航到Tab2 我包含了我的代码示例 JSFiddle

enter code here

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您需要隐藏模态backdrop。在你的CSS中添加它，虽然我不确定你想要做什么：

.ui-widget-overlay{
    display:none;
}

工作小提琴：http://jsfiddle.net/sandenay/CnEUh/2054/

jquery模式覆盖仅在父div上

1 个答案: