覆盖层/对话框类似煎茶触摸

我需要点击在头一个按钮，然后叠加将显示像煎茶触摸：覆盖层/对话框类似煎茶触摸

Example image in Sencha touch

如何在同一个页面做这个覆盖与jQueryMobile

的jsfiddle例子： http://jsfiddle.net/ReMZ6/184/

2012-02-18 os ip

目前的对话框这个覆盖支持是不是在jQuery的可用mobile.But它预计将在未来versions.They提出了一个演示

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script> 
     $("#show-overlay").live("click",function(){ 
      $(".overlay").toggle(50); 
     }); 
     $(".ui-mobile-viewport").live("click",function(event){ 
      var target = event.target; 
      //Close the overlay if you have clicked on anywhere in body except the overlay itself and the button in header. 
      //If the check for button in this if is skipped,you will not be able to show the overlay.Clicking on button in header to close is //handled by previous event handler. 
      if($('#show-overlay').find(target).length==0 && $('.overlay').find(target).length==0) { 
       $(".overlay").hide(50); 
      } 

     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    <style> 
     .overlay{ 
      width:150px; 
      position:absolute; 
      top:45px; 
      left:5px; 
      border-radius:5px; 
      background:#25374c; 
      z-index:1501; 
      padding:3px 5px 5px 5px; 
     } 
     .overlay-header{ 
      text-align:center; 
      color:#fff; 
      margin-bottom:3px; 
     } 
    </style> 
</head> 
<body> 

<div id="home" data-role="page"> 
    <div data-role="header"> 
    <h1>Title</h1> 
    <a name="submit" value="submit-value" id="show-overlay" data-icon="gear">OverLay</a> 
    </div> 
    <div data-role="content"> 
     <ul id='company_list' data-role='listview' data-inset='false'> 
      <li>item 1</li>  
      <li>item 2</li>  
      <li>item 3</li>  
      <li>item 4</li>  
     </ul> 
    </div> 
    <div class="overlay" style="display:none"> 
    <div class="overlay-header"> 
     Title 
    </div> 
    <div class="overlay-content"> 
    <ul id='tas_list' data-role='listview' data-theme="e"> 
      <li>Overlay item 1</li> 
      <li>Overlay item 2</li> 
      <li>Overlay item 3</li> 
      <li>Overlay item 4</li> 
     </ul> 
    </div> 
</div> 
</div> 



</body> 
</html>

一个在这里演示 - http://jsfiddle.net/K3Tpu/

： http://filamentgroup.com/tests/popup/docs/pages/popup/index.html

暂时可以使用下面的代码来实现类似的东西，你所需要的 - 该功能将如何在这个网址的

这只是一个粗略的草案，可能会有一些问题。

让我知道是否有帮助。

来源

2012-02-18 15:11:34 user700284

魔兽世界，设计工作在iPad上100％，但有一个问题时，关闭覆盖，你必须点击覆盖按钮，只有当我点击其他地区覆盖不会关闭 – 2012-02-19 09:36:07

很高兴成为帮助。不确定为什么这种情况下在ipad.is失败它在Safari浏览器中工作？ – user700284 2012-02-19 10:13:39

在我的电脑上安装的Safari你的例子工作，我可以调用$（“。overlay”）。hide（50）;无论我想在我的ipad上，这对我来说就够了。 – 2012-02-19 10:51:39