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">
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            z-index: 9999;
            position: fixed;
            margin: 0px 25%;
            z-index: 99999;
            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;


Step 3: Use below Script on your page.

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

        function ShowModalPopUp_SemiTransparentBG() {
            $("#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() {

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.


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

Screen Shot

  Modified On Sep-18-2014 01:24:09 PM

Leave Comment