May 27, 2013

ModalPopup like effect using simple JavaScript and CSS

In Ajax control toolkit, you find many fantastic controls, one of them is "ModalPopupExtender". This extender is not always a desirable choice to use because sometimes you are not using control kit in your project.

To start with, you can seen ModalPopup effect here. But in this post, I try to elaborate simple way of creating this effect using JavaScript and CSS.

What is ModalPopup? 

Its nothing but a page that is inaccessible because it is cover with div having z-index (Like of 3D) set to make it blocking. The opacity of overlaying div can be set to make it see through so that you can seen in background but blurred and frozen.

Another div is also present in same page (hidden by default) becomes visible and its z-index is set higher than that of overlaying div making it clearly and also accessible.

Let starts coding. 
  • Create a website in Visual Studio or Visual Web Developer and there you see a .aspx page named as (Default.aspx). 
  • Open Default.aspx page, here we need controls like (1 TextBox and 1 Button. 2 Div's, we'll use one div for display as modal popup and other to overlay screen).
  • Firstly, create a div which we will display as ModalPopup like:

<div id="modalMsg" style="width: 200px; height: 100px; border-color: Black; border-style: solid;
    color: Red;" class="HideModal">
    This is modalpopup window
    <asp:LinkButton ID="lnkOk" runat="server" OnClientClick="return RemoveModal();" Text="OK" />
</div>
  • Now create a div for overlay screen as:
<div id="overlay"></div>
  • To set overlay screen and making popup visible functionality, here we need to add some CSS as:

<style type="text/css">
    .ShowModal
    {
        top: 200px;
        left: 250px;
        z-index: 1000;
        position: absolute;
        background-color: White;
        display: block;
    }
    .HideModal
    {
        display: none;
    }
    .OverlayEffect
    {
        background-color: black;
        filter: alpha(opacity=70);
        opacity: 0.7;
        width: 100%;
        height: 100%;
        z-index: 400;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
  • After CSS applied on page, add Javascript function has to be created which will assign css class to overlay and modal message div's as:

<script type="text/javascript">
    function DisplayModal()
    {
        document.getElementById("overlay").style.height = document.body.clientHeight + 'px';
        document.getElementById("overlay").className = "OverlayEffect";
        document.getElementById("modalMsg").className = "ShowModal";
    }
    function RemoveModal()
    {
        document.getElementById("modalMsg").className = "HideModal";        
        document.getElementById("overlay").className = "";
        return false;
    }
</script>

  • Now finally add these lines in Default.aspx code behind which call JavaScript function and update label in modal div. This all works using RegisterStartupScript method as: 

protected void SubmitButton_Click(object sender, EventArgs s) 
{
    ClientScript.RegisterStartupScript(this.GetType(), "JsModal", "DisplayModal()", true);
}

After button clicked, DisplayModal function will be called which will set the CSS class of both overlay and modalmessage div.

CSS class takes care of giving appropriate effect. The RemoveModal function used by "OK" button present in modal popup window to vanish the effect.

This method uses only CSS and javascript. so, it works in every browser.

The output is displayed as this




For whoever interested, here is complete page code to get going:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Modal Popup using JavaScript and CSS</title>
    <style type="text/css">
        .ShowModal
        {
            top: 200px;
            left: 250px;
            z-index: 1000;
            position: absolute;
            background-color: White;
            display: block;
        }
        .HideModal
        {
            display: none;
        }
        .OverlayEffect
        {
            background-color: black;
            filter: alpha(opacity=70);
            opacity: 0.7;
            width: 100%;
            height: 100%;
            z-index: 400;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>

    <script type="text/javascript">
        function DisplayModal()
        {
            document.getElementById("overlay").style.height = document.body.clientHeight + 'px';
            document.getElementById("overlay").className = "OverlayEffect";
            document.getElementById("modalMsg").className = "ShowModal";
        }
        function RemoveModal()
        {
            document.getElementById("modalMsg").className = "HideModal";        
            document.getElementById("overlay").className = "";
            return false;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="SubmitButton" runat="server" Text="Click Here" OnClick="SubmitButton_Click" />
    </div>
    <div id="overlay"></div>
    <div id="modalMsg" style="width: 200px; height: 100px; border-color: Black; border-style: solid;
        color: Red;" class="HideModal">
        This is modalpopup window
        <asp:LinkButton ID="lnkOk" runat="server" OnClientClick="return RemoveModal();" Text="OK" />
    </div>
    </form>
</body>
</html>

protected void SubmitButton_Click(object sender, EventArgs s) 
{
    ClientScript.RegisterStartupScript(this.GetType(), "JsModal", "DisplayModal()", true);
}

17 comments:

  1. thjhyyyyyyyyyyyyyyyyyyyyyyyrt

    ReplyDelete
  2. That's a great idea. It looks like it could work in other locations as well, provided one could get enough volunteers to keep it up.
    Transparent Stickers

    ReplyDelete
  3. Hi, i'm jernny
    I have read your post this is very informative website. i appreciate you thanks for sharing information
    PVC Stickers

    ReplyDelete
  4. This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article
    Laptop Stickers

    ReplyDelete
  5. Hi! Great work. I feel nice to be here reading your authentic work.

    ReplyDelete
  6. I always appreciate quality content, Thanks to you for sharing such post.

    ReplyDelete
  7. I am certainly making the most of your site. You unquestionably have some extraordinary knowledge and incredible stories.embossed stickers

    ReplyDelete
  8. Custom Packaging Boxes Products
    Here are some design ideas of the products where you can take inspirations from and let us work
    with your added instructions. We would always maximize the value of the product.
    Custom Packaging Boxes

    ReplyDelete
  9. GET BUSINESS CARD PRO
    AT WHOLESALE PRICES
    FOR YOUR BUSINESS INSTANTLY
    PRINT YOUR IDEAS TO LIFE WITH PREMIUM BUSINESS CARD PRO, POSTCARDS AND MORE.
    Business Cards

    ReplyDelete
  10. Order your custom mailer boxes, custom cardboard mailers and corrugated mailer boxes with full-colour highest quality offset printing, choosing the desired sizes, styles and different surface finishes to add value to your custom mailer boxes.
    custom cardboard mailers

    ReplyDelete
  11. I like the valuable info you provide in your articles. I will bookmark your blog and check again here frequently. I am quite certain I will learn many new stuff right here! Good luck for the next!


    Custom CBD Boxes

    ReplyDelete
  12. I really enjoy simply reading all of your weblogs. Simply wanted to inform you that you have people like me who appreciate your work. Definitely a great post. Hats off to you! The information that you have provided is very helpful. best soccer prediction site.
    Printed Boxes
    custom pizza Boxes

    custom candy boxes

    custom gift boxes

    ReplyDelete
  13. Its a great one and also a beautifully crafted one. looking forward for more from this website.I read all of article of the site the article was very nice go and check it out!
    Bakery Boxes

    Cosmetic Boxes

    Retail Boxes

    ReplyDelete
  14. great performance of your work and sharing the website with my friends good response on your website
    Custom Cereal Boxes

    ReplyDelete
  15. great performance of your work and sharing the website with my friends good response on your website
    Custom Cereal Boxes

    ReplyDelete
  16. Hello there, just became alert to your blog through Google, and found
    that it’s truly informative. I’m going to watch out for brussels.
    I will be grateful if you continue this in future. Many people will be benefited from your writing.
    Cheers!
    Birthday wishes Friend
    Birthday wishes Father
    Birthday wishes Mother

    ReplyDelete