A simple in-page pop up panel.

I prepared 2 sample pages to show on how to design your own pop up panel by using CSS, Javascript and Code Behind.

First, let see how a pop up panel look like at html.

• A div element cover the whole page with semi transparent or solid colour background.

• Another div element as the container of pop up panel at the centre of page.

By understand this, you can easily design your own pop up panel.

        <div id="SemiTransparentBG" class="fadePanel semiTransparent">
        </div>
        <div id="TransparentBG" class="fadePanel transparent">
        </div>
        <div id="PopUp" class="Popup">
            <div class="InnerPopup">
                <p>Here is the body of a pop up element.</p>
                <p id="PopUpBody"></p>
                <p>
                    <input type="button" id="Close" value="Close" onclick="ClosePopUp();" />
                </p>
            </div>
        </div>

Here, I prepared 3 div elements with different CSS classes. So that I can easily form 3 type of pop up panel by using the combination of them. Which are :

• Modal PopUp with Semi Transparent Background
• Modal PopUp with Transparent Background
• PopUp without Background

CSS play a very important role to create the pop up effect at web page. Let me describe some of the important CSS classes that you can find in this sample.

.fadePanel
{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 9999;
}

To form a full screen background, you have to use 100% for width and height, set 0px to top and left. Position = fixed so that it will not move event the page come with scroll bar. z-index = 9999 so that it will appeared on top of the others.

.Popup
{
    position: fixed;
    margin:0px 25%;
    z-index: 99999;
}

This CSS class applied to the outer of the pop up container. Position = fixed so that it will not move event the page come with scroll bar. Higher z-index so that it will appeared on top of the background panel. margin of left and right are actually adjustable according to the width of the pop up container. For this page, I’m using 25%.

.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;
}

This CSS class applied to the pop up container. The important CSS are width and height for the pop up. The rest can be ignored if you don’t want the cosmetic effects.

I also created few Javascript functions for this page to handle the show and hide of the pop up panel. They are pretty straight forward by using jQuery.

        <script type="text/javascript">
            $(document).ready(function () {
                //Hide all pop up related elements during page ready.
                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 ShowModalPopUp_TransparentBG() {
                $("#TransparentBG").show('slow');
                $("#PopUp").show('slow');
                $("#PopUpBody")[0].innerHTML = "This popup <b>doesn't</b> brings a visual effect that tell user, they are not allow to click the background controls until this popup closed. </br> </br> <b>In fact</b>, they cannot click the background controls. ^^";
            };

            function ShowPopUp_NoBG() {
                $("#PopUp").show('slow');
                $("#PopUpBody")[0].innerHTML = "This popup will not block access to any visible background controls.";
            };

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

If you don’t like to code in Javascript, I has prepared another page for you as reference. There are nothing different by comparing the CSS classes. The only different is it isn’t using any Javascript but C# (VB.NET also can).

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
                HidePopUp();
        }

        private void HidePopUp()
        {
            SemiTransparentBG.Visible = false;
            TransparentBG.Visible = false;
            PopUp.Visible = false;
        }

        protected void Close_Click(object sender, EventArgs e)
        {
            HidePopUp();
        }

        protected void PopUp_NoBG_Click(object sender, EventArgs e)
        {
            PopUp.Visible = true;
            PopUpBody.InnerText = "This popup will not block access to any visible background controls.";
        }

        protected void ModalPopUp_TransparentBG_Click(object sender, EventArgs e)
        {
            TransparentBG.Visible = true;
            PopUp.Visible = true;
            PopUpBody.InnerHtml = "This popup <b>doesn't</b> brings a visual effect that tell user, they are not allow to click the background controls until this popup closed. </br> </br> <b>In fact</b>, they cannot click the background controls. ^^";
        }

        protected void ModalPopUp_SemiTransparentBG_Click(object sender, EventArgs e)
        {
            SemiTransparentBG.Visible = true;
            PopUp.Visible = true;
            PopUpBody.InnerText = "This popup brings a visual effect that tell user, they are not allow to click the background controls until this popup being closed.";
        }

Download Attachment