Top Ad unit 728 × 90

random
Home aspnet popup window dimming div data

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














popup window dimming div data Reviewed by Vikas Kumar Singh on December 14, 2017 Rating: 5

Tags :

2 comments:

Subscribe to: Post Comments (Atom)
All Rights Reserved by DotNetBasic.com © 2019

Contact Form

Name

Email *

Message *

© 2018 All rights reserved by DotNetBasic. Powered by Blogger.