Logic Story

December 19, 2012

A simple in-page pop up panel.

Filed under: ASP.NET, CodeProject, CSS, JavaScript — Tags: , , , , , — Cruz Boon @ 00:04

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.

popupBG

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

popup

  • 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

About these ads

3 Comments »

  1. It is actually a great and helpful piece of information. I am
    satisfied that you just shared this helpful information with
    us. Please keep us up to date like this. Thank you for sharing.

    Comment by www.librarian.co.kr — January 26, 2013 @ 04:50

    • Thanks. I’m sure more and more are coming. ^^

      Comment by Cruz Boon — January 26, 2013 @ 08:35

  2. excellent publish, very informative. I ponder why the opposite specialists of this sector do not notice this.
    You must proceed your writing. I am confident, you have a great readers’ base already!

    Comment by burn the fat feed the muscle excel sheet — May 24, 2013 @ 13:25


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Silver is the New Black Theme Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: