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);
}
Labels:
Location:Pakistan Karachi, Pakistan

18 comments:

  1. AnonymousAugust 7, 2014 at 3:42 PM

    thjhyyyyyyyyyyyyyyyyyyyyyyyrt

    ReplyDelete
  2. Jenny RoseAugust 28, 2019 at 9:33 PM

    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. Jenny RoseAugust 29, 2019 at 11:15 PM

    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. Jenny RoseSeptember 4, 2019 at 10:25 PM

    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. Custom StickersSeptember 9, 2019 at 7:35 PM

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

    ReplyDelete
  6. Ask Questions Get AnswersSeptember 9, 2019 at 7:37 PM

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

    ReplyDelete
  7. Akon whickJanuary 24, 2020 at 4:02 AM

    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
  8. Jenny RoseMarch 17, 2020 at 1:47 AM

    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
  9. packagingpapa BoxesMarch 18, 2020 at 5:42 PM

    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
  10. Jenny RoseMarch 31, 2020 at 12:50 AM

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

    ReplyDelete
  11. Akon whickMay 4, 2020 at 11:46 PM

    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!
    Window gable boxes
    usb car charger boxes
    two piece product boxes
    sturdy hygienic boxes
    sports pouch boxes
    soap packaging wholesale boxes
    serum Packaging Boxes
    screen protectors Packaging boxes
    Promotional Carrier Boxes
    Packaging Boxes

    ReplyDelete
  12. MtomSEOJune 7, 2020 at 1:21 PM

    your blog is very good. It was very well authored and easy to understand. Unlike additional blogs I have read which are really not good. I also found your posts very interesting web design manhattan

    ReplyDelete
  13. AnonymousJune 11, 2020 at 2:05 PM

    This comment has been removed by the author.

    ReplyDelete
  14. Ava jecobJune 13, 2020 at 8:36 PM

    Great packaging design, specifically retail packaging will have what’s known as blink factor. It's the design elements that come together to make the packaging pop off the shelf and differentiate the product from the others next to it. custom packaging box usa

    ReplyDelete
  15. sdexterJune 14, 2020 at 10:03 PM

    An incredibly interesting examine, I may possibly not concur entirely, but you do make some very valid points. branding agency sf

    ReplyDelete
  16. william locasJune 21, 2020 at 5:11 PM

    Very best people messages are meant to charm allow honor toward groom and bride. Newbie speakers in front of excessive locations should usually our own gold colored dominate in presenting and public speaking, which is to be personal interests home. best man speach interface design agency san francisco

    ReplyDelete
  17. julie larsJune 28, 2020 at 7:27 PM

    my baby enjoys playing on the baby swing, baby swings can really make your baby happy- ipad psd

    ReplyDelete
  18. thomasjackDecember 2, 2021 at 8:17 PM

    It is very informative post thanks for sharing the information.
    Candle boxes
    Candy packaging wholesale

    ReplyDelete

Subscribe to: Post Comments (Atom)