Home/ Questions/Q 7519351
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T01:53:17+00:00

I need to click on a button in header then overlay will show like

  • 0

I need to click on a button in header then overlay will show like Sencha Touch:

Example image in Sencha touch

how to do this overlay with jQueryMobile in the same page

JsFiddle Example:
http://jsfiddle.net/ReMZ6/184/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0