Home > DeveloperSection > Blogs > Simple popup panel in HTML

Simple popup panel in HTML


Database Database 
Ratings:
0 Comment(s)
 1808  View(s)
Rate this:

Simple popup panel in HTML

In this blog, I have described how to create a simple popup window or display page as popup window. There are simple CSS file and JavaScript that used for open model popup. Steps are given below.

Step 1: Open notepad or any other HTML editor as Visual Studio ASP.NET etc.

Step 2: Write below CSS on your page.

<style type="text/css">
        .fadePanel
        {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            z-index: 9999;
        }
        .Popup
        {
            position: fixed;
            margin: 0px 25%;
            z-index: 99999;
        }
        .InnerPopup
        {
            margin: auto;
            min-width: 380px;
            min-height: 200px;
            background-color: #CEC9C9;
            padding: 30px;
            -moz-border-radius-topright: 50px;
            border-top-right-radius: 50px;
            -moz-border-radius-topleft: 50px;
            border-top-left-radius: 50px;
            -moz-border-radius-bottomright: 50px;
            border-bottom-right-radius: 50px;
            -moz-border-radius-bottomleft: 50px;
            border-bottom-left-radius: 50px;
            border: 1px solid Black;
        }
    </style>

 

Step 3: Use below Script on your page.

<script type="text/javascript">
        $(document).ready(function () {
            ClosePopUp();
        });

        function ShowModalPopUp_SemiTransparentBG() {
            $("#SemiTransparentBG").show('slow');
            $("#PopUp").show('slow');
            $("#PopUpBody")[0].innerHTML = "This popup brings a visual effect that tell user, they are not allow to click the background controls until this popup being closed.";
        };

        function ClosePopUp() {
            $("#SemiTransparentBG").hide('slow');
            $("#TransparentBG").hide('slow');
            $("#PopUp").hide('slow');
        };
    </script>

Step 4: Include jquery-1.4.1.js on your page. This JavaScript file you easily download from difference sources. This JavaScript include before step 3.

Step 5: Now we create div that are open as popup. Line of code is given below.

 

<div>
        <input type="button" id="Button2" value="Close" onclick="ShowModalPopUp_SemiTransparentBG();" /></div>
    <div id="SemiTransparentBG" class="fadePanel semiTransparent">
    </div>
    <div id="PopUp" class="Popup">
        <div class="InnerPopup">
            <p id="PopUpBody">
            </p>
            <p>
                <input type="button" id="Close" value="Close" onclick="ClosePopUp();" />
            </p>
        </div>
    </div>

Screen Shot


Don't want to miss updates? Please click the below button!

Follow MindStick