我可以使我的面板成爲唯一活動頁面嗎？

Question

我的功能不允許用戶在面板打開時單擊任何東西。因此，在面板打開時禁用頁面功能。

<div data-role="page" id="pageone"> 
<div data-role="panel" id="myPanel" data-position="right" data-display="overlay" data-position-fixed="true" data-swipe-close="false" data-dismissible="false" style="background-color:#FFD1DC;"> 

    <div data-role="collapsible" id="custom-collapsible"> 
     <h3>OS</h3> 
      <div data-role="collapsible" data-mini="true"> 
      <h4>Scope</h4> 
      <a href="#myPanel2"><p><?php include 'showall_os.php';?></p></a> 
      </div>  
    </div> 

我使用jQuery Mobile的面板1.4.4

Answer 1

<a href="#myPanel" data-role="button" data-inline="true" data-mini="true">open</a> 
<div data-role="panel" id="myPanel" data-position="right" data-display="overlay" data-position-fixed="true" data-swipe-close="false" data-dismissible="false"> 
<a href="#myPanel" data-role="button" data-inline="true" data-mini="true">close</a> 
     <div data-role="collapsible" id="custom-collapsible"> 
      <h3>OS</h3> 
      <div data-role="collapsible" data-mini="true"> 
       <h4>Scope</h4> 
       <a href="#myPanel2"><p><?php include 'showall_os.php';?></p></a> 
      </div>  
     </div> 
    </div> 
<div id="fixedbg" style="display:none;"></div> 
<button>dgfjsdhgjsdfg</button> 

CSS

#fixedbg{ 
    position:fixed; 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,0.5); 
    top:0;left:0; 
    z-index:1000; 
} 

jQuery的

$("#myPanel").panel({ 
    beforeopen: function(event, ui) { 
     $('#fixedbg').css('display','block'); 
    },//beforeclose 
    close : function(event, ui) { 
     $('#fixedbg').css('display','none'); 
    } 
}); 

see in action JSFIDDLE