css I have set the z-index property of the both div. You will see here modal popup div appears above the masked div.īecause in the. Here you will find something interesting. I could use color as background and sets its opacity but since opera does not support opacity so I had to use its substitute as transpartent png image that provides the same effect. On clicking on the link the a javascript function CloseModalPopup is called and modal popup is close. On clicking on submit button in modal popup window a javascript function Submit is called that set the inner text of tdDisplayName to the text you have enter in the text box and will close the popup window.Īt the modal popup window you will see a close link. This is a td in the parent window whose innerHTML is set to blank first. At the popup window u will be asked to enter your name and after submitting data form the modal popup tdDisplayName's innerHTML is set to your name.Īfter this I have set the position of the modal popup window div and masked div and made these div visible. In the OpenModelPopup() function you will see tdDisplayName. The ModalPopupDiv is modal popup window that ask for the input and on submitting its displays the name at parent window.ĭocument.getElementById ( ' tdDisplayName').innerHTML= ' ' ĭocument.getElementById ( ' txtName').value= ' ' ĭocument.getElementById ( ' ModalPopupDiv').style.visibility= ' visible' ĭocument.getElementById ( ' ModalPopupDiv').style.display= ' ' ĭocument.getElementById ( ' ModalPopupDiv').style.top= Math.round (( /2)+ )-100 + ' px' ĭocument.getElementById ( ' ModalPopupDiv').style.left= ' 400px' ĭocument.getElementById ( ' MaskedDiv').style.display= ' ' ĭocument.getElementById ( ' MaskedDiv').style.visibility= ' visible' ĭocument.getElementById ( ' MaskedDiv').style.top= ' 0px' ĭocument.getElementById ( ' MaskedDiv').style.left= ' 0px' ĭocument.getElementById ( ' MaskedDiv').style.width= + ' px' ĭocument.getElementById ( ' MaskedDiv').style.height= + ' px'
This image is transparent enough to view the parent content from the masked div. Z-index is set to 100 so that will appear above the parent page.īack-ground image is set to mask.png image. Width and height of the div is determined at runtime in the javascript. To make mask over parent window what we need to do is to cover up the parent window by the any div. So in javascript we find the screen width and height and set it to maskedDiv's width and height that covers the parent window. I have set the visibility to hidden so that when it is page is loaded first time it will not be shown.Īnd top property of the div is set to 0px so that the div will open from top left of the screen. _filter:progid:(enabled=true, sizingMethod=scale src='Mask.png') It has a css class MaskedDiv that sets its properties. MaskedDiv serves the purpose of masking the parent window. aspx page that has two div 1) MaskedDiv and 2) ModalPopupDiv Enter your name and click on submit button a javascript funcion Submit will be called that will close the window and your name will pe displayed on the parent window as shown below. On clicking the link a javascript function OpenModelPopup() is called thatt will open masked div and a popup window that will asked to input name.įrom this window you wont be able to switch to the parent window until you close the popup window. In the above picture there is link 'Click here to show the masked popup'. See the picture below I am explaining step by step. There is an image mask.png which is used as the transparent background of the masking div. A css file style.css is used to set the style of the two div and a Java Script file maskdiv.js is used to to call the functions to show and hide the masked div and popup window. To make a masked div and modal popup window I have created two div MaskedDiv to create a mask over the parent window and a ModalPopupDiv to create modal popup window. Modal popup windows are commonly used in applications to control user awareness and to display critical notices. This masked div serves same functionality as the Ajax Modal popup that servers the same purpose in Asp.net without any complex coding. Prevents the user from interacting with parent window before he returns to the parent application. Introduction What does Masked Div or Modal Popup Window mean ?Ī Masked div or modal popup window is a child window created from the parent window which
0 kommentar(er)
