본문 바로가기

카테고리 없음

[jquery mobile] popup

http://stackoverflow.com/questions/9341530/overlay-layer-dialog-similar-to-sencha-touch


Currently this overlay support for dialog is not available in jquery mobile.But it is expected to come in future versions.They have put up a demo of how that feature is going to be in this url -

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

For the time being you can use the following code to achieve something similar to what you need:

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

A demo here - http://jsfiddle.net/K3Tpu/

This is just a rough draft only and there might be some issues.

Let me know if that helps.