popup window dimming div data


Popup Window dimming div data

This script show the popup model window  dimming div. you can also put addition information like some controls to ask for extra information. This concept is called popup window dimming div.

Script is working in IE and Chrome and Firefox.

For more details about java script you can use below site.

References | https://www.w3schools.com/jsref/default.asp

 

Tag | javascript dim background , dim background css , popup window with background fade

Go for  Client side Multiple parameter post :

Purpose
 
The first use of this feature is to dim the page and to use any div,identified by an id,you write in your HTML code.
When you click on click me image ,able popup window will display with background disable ,so use will not able to click on background window during working in popup window.

Use below java script and html.

below is the code for popup window dimming div 

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”DisabledPage.aspx.cs” Inherits=”TestProj.DisabledPage” %>

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <title>Josh – Test</title>
        <style type=”text/css”>
            .opaqueLayer
            {
                display:none;
                position:absolute;
                top:0px;
                left:0px;
                opacity:0.6;
                filter:alpha(opacity=60);
                background-color: #000000;
                z-Index:1000;
            }
           
            .questionLayer
            {
                position:absolute;
                top:0px;
                left:0px;
                width:350px;
                height:200px;
                display:none;
                z-Index:1001;
                border:2px solid black;
                background-color:#FFFFFF;
                text-align:center;
                vertical-align:middle;
                padding:10px;
            }
        </style>
        <script type=”text/javascript”>
            function getBrowserHeight() {
                var intH = 0;
                var intW = 0;
              
                if(typeof window.innerWidth  == ‘number’ ) {
                   intH = window.innerHeight;
                   intW = window.innerWidth;
                }
                else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                    intH = document.documentElement.clientHeight;
                    intW = document.documentElement.clientWidth;
                }
                else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
                    intH = document.body.clientHeight;
                    intW = document.body.clientWidth;
                }
                return { width: parseInt(intW), height: parseInt(intH) };
            } 
            function setLayerPosition() {
                var shadow = document.getElementById(“shadow”);
                var question = document.getElementById(“question”);
                var bws = getBrowserHeight();
                shadow.style.width = bws.width + “px”;
                shadow.style.height = bws.height + “px”;
                question.style.left = parseInt((bws.width – 350) / 2);
                question.style.top = parseInt((bws.height – 200) / 2);
                shadow = null;
                question = null;
            }
            function showLayer() {
                setLayerPosition();
                var shadow = document.getElementById(“shadow”);
                var question = document.getElementById(“question”);
                shadow.style.display = “block”;
                question.style.display = “block”;
                shadow = null;
                question = null;            
            }
           
            function hideLayer() {
                var shadow = document.getElementById(“shadow”);
                var question = document.getElementById(“question”);
                shadow.style.display = “none”;
                question.style.display = “none”;
                shadow = null;
                question = null;
            }
            window.onresize = setLayerPosition;
        </script>
    </head>
<body>
        <div id=”shadow” class=”opaqueLayer”> </div>
        <div id=”question” class=”questionLayer”>
            <br />
            <br />
            <br />
            How about this?
            <br />
            <br />
            <br />
            <input type=”button” onclick=”hideLayer(); value=”Close” />
        </div>
        <h3>Modal Layer Test</h3>
        <p>Click the image below to display the “modal” layer</p>
        <img src=”clickme.png” style=”resize:both” alt=”Test Image” onclick=”showLayer();” />
    </body>
</html>

//close the html here.


Out put :
when you click on click me button ,one popup will display and behind popup screen will lock and see in grey color.

 

Popup window dimming div

 

Popup window dimming div

 

 

SHARE THIS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.