Mask Control for Asp.net Web Page Using Javascript
Today i want to discuss how to prepare or Loading a Mask in Asp.net for Whole Web Page for a certain time interval.So that the User can not able to edit the Web page on that specific set of time Interval i.e.when the Page is in still Processing.
I think there is no such control in asp.net to Mask the whole page as it indicates that the Page is still Processing.But that's where the beauty of java script and css comes to handy to solve this type of Problems.Advantages of Using the Mask control :
suppose a web page is in Processing for a longer period of time due to some written code for stopping and starting the services in the web page or even fetching the larger data from the database.In order restrict the User for performing an action in the Page for a stipulated period of time this Mask control will be Useful.
First of all we try to take a look how this Mask Editor Control looks like in real time thereafter we will look at the Code.
In the Above picture i have a grid in that i have one link button as soon as i click the Link button i am showing some mask with dark color. so the user not able to edit the Web page until the Mask gets fade out as the page internally runs the code and give the Output.
for Designing these things we need to do these...
div id="MaskedDiv" class ="MaskedDiv"div
div id="ModalPopupDiv" align="center" class="ModalPopup"
img src="Images/pHHzT.gif" id="imgname"
div
Code for Javascript
function OpenModelPopup()
{
// document.getElementById('tdDisplayName').innerHTML = '';
// document.getElementById('txtName').value = '';
document.getElementById('ModalPopupDiv').style.visibility = 'visible';
document.getElementById('ModalPopupDiv').style.display = '';
document.getElementById('ModalPopupDiv').style.top = Math.round((document.documentElement.clientHeight / 2) + document.documentElement.scrollTop) - 100 + 'px';
document.getElementById('ModalPopupDiv').style.left = '400px';
document.getElementById('MaskedDiv').style.display = '';
document.getElementById('MaskedDiv').style.visibility = 'visible';
document.getElementById('MaskedDiv').style.top = '0px';
document.getElementById('MaskedDiv').style.left = '0px';
document.getElementById('MaskedDiv').style.width = document.documentElement.clientWidth + 'px';
document.getElementById('MaskedDiv').style.height = document.documentElement.clientHeight + 'px';
// window.setTimeout(CloseModelPopup, 5000);
window.setTimeout(CloseModelPopup, 8000);
}
function CloseModelPopup()
{
document.getElementById('MaskedDiv').style.display = 'none';
document.getElementById('ModalPopupDiv').style.display = 'none';
}
Css for this
div.MaskedDiv
{
visibility: hidden;
position:absolute;
left:50px;
top:50px;
font-family:verdana;
font-weight:bold;
padding:40px;
z-index:900;
height:auto;
width:auto;
background-image:url(../Images/Mask.png);
/* ieWin only stuff */
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../Images/loader.gif');
}
div.ModalPopup {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
background-color: #CCCCCC;
position:absolute;
/* set z-index higher than possible */
z-index:10000;
visibility: hidden;
color: Black;
border-style: solid;
border-color: #999999;
border-width: 1px;
width: 30px;
height :auto;
vertical-align:middle;
}
for those two divs i have two css classes.
The SetInterval will set the timeout of the Page for 8 seconds.Where the mask is going to appear 8 seconds.
The Grid Code looks like this...
Requirements :
Apart from this Code we need to have one loader.gif and one mask.gif find an attachment with this code.
If you want save these images right click and choose save image as....
Attachments
Follow