只有父div的jquery模式覆蓋

我有2個標籤和2個標籤內容。我有每個選項卡上的按鈕來打開一個jQuery對話框我要確保當我打開對話框1我仍然可以瀏覽到TAB2而不關閉對話框我包括我的代碼示例 JSFiddle 只有父div的jquery模式覆蓋

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: { 
 
\t \t \t "my": "right top+20", 
 
\t \t \t "at": "left top", 
 
\t \t \t "of": $("#form1") 
 
\t \t }, 
 
    buttons: { 
 
     
 
     "Close": function() { 
 

 
\t \t \t \t 
 
\t \t \t \t $(this).dialog("close"); 
 

 
\t \t \t } 
 
    } 
 
});

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

來源

2015-10-19 user3581934

您需要隱藏模式backdrop。在你的CSS添加這個，雖然我不知道你正在嘗試做的：

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

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

來源

2015-10-19 17:35:02

當切換到TAB2我們可以隱藏與覆蓋對話框？ – user3581934

$（「modal-id-here」）。modal（「hide」） –

類似這樣的：http://jsfiddle.net/sandenay/CnEUh/2056/ –

只有父div的jquery模式覆蓋

回答

相關問題