Translate

Sunday, April 15, 2012

Disable background when pop up appears (modal window using jquery)


In this article I will show you how to create a modal pop up window (like the one shown below) within a few minutes.  In the example shown below, when you click a button, a window will appear that will block out rest of the screen. You have to close this window to be able to interact with the main screen.

Screen before clicking the button:


Screen after clicking the button:













To follow the example below you will need to download the following two javascript libraries and one css file
1> jquery-1.4.1.min.js
2>jqModal.js
3>jqModal.css

Once you have these three files copy the .js files into a folder called Scripts. Copy the css to a folder called Styles. Then copy paste the html below into a file with .html extension.


<html>
<head>
    <title>Modal window</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jqModal.js"></script>
    <link href="Styles/jqModal.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {

            $("#modalWindow").jqm({
                onShow: jqModalShowHandler,
                onHide: jqmHideModalHandler,
                modal: true
            });


            $("#btnShow").click(btnShowClick);

            function btnShowClick() {
                $("#modalWindow").jqmShow();
            }

            function jqModalShowHandler() {
                $('#modalWindow').show();
            }



            function jqmHideModalHandler(e) {

                e.w.hide(); // Hide window
                e.o.remove(); // Remove overlay
            }

        });
    </script>
</head>
<body>
    <input id="btnShow" type="button" value="Click Me to see modal" />
    <div class="Medium jqmWindow" id="modalWindow" style="display: none">
        <a class="jqmClose modal_tools_close" style="float: right;" href="#">X</a>
        <div class="modalContent">
            <br />
            <br />
            <br />
            <br />
            <br />
            This is a modal window
        </div>
    </div>
</body>
</html>

  This is how your final folder structure would look like. 




Now you're good to go. Play around with the div tag with id=modalWindow to customize it to your needs.



Show a modal window with javascript

To show a simple modal box (where background is NOT grayed out) use

var features="edge:sunken;scroll:no;status:no;unadorned:yes;help:no; ";
 
        var url = ....
 
window.showModalDialog(url ,"" , features);

No comments:

Post a Comment

Comments will appear once they have been approved by the moderator