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

我可以在选择时将Panel设为唯一的活动页面

1 个答案: