Archive for April 21, 2009
Create Popup Panel
April 21, 2009
Leave a comment
Hi
try this example :-
<html> <head> <style> Body { font-family: Arial; } .PopupPanel { border: solid 1px black; position: absolute; left: 50%; top: 50%; background-color: white; z-index: 100; height: 200px; margin-top: -100px; width: 400px; margin-left: -200px; } .PopupPanelModalArea { left: 0; top: 0; height: 100%; width: 100%; position: absolute; background-color:silver; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); z-index: 99; border: 0; -moz-opacity: 0.60; } .PopupPanel .TitleBar { margin: 0; display: block; background-color: #0058ee; line-height: 20px; color: white; font-weight: bold; padding: 0 0 0 5px; } .PopupPanel .ContentArea { padding: 0 0 0 5px; } </style> <script> /********************************** Simply displays or hides the panel **********************************/ function TogglePopupPanel() { var panelContainer = document.getElementById("PopupPanel"); if (panelContainer.style.display == "none") { panelContainer.style.display = ""; document.getElementById('PopupPanelModalArea').focus(); document.body.onfocus = function() { document.getElementById('PopupPanelModalArea').focus(); }; } else { panelContainer.style.display = "none"; document.body.onfocus = function() { return true; }; } } </script> </head> <body> This is the Popup Panel test page. The idea is that you will not be able<br/> to alter or interact with the contents of the underlying page while the panel is displaying.<br/> <br/> <input type="Button" value="Display Popup Panel" onclick="TogglePopupPanel()" /><br/> <br/> <select> <option value="0">-- Select --</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <input type="Button" value="Test Button"/><br/> <!-- ****************************** --> <!-- Start of the PopupPanel HTML --> <!-- ****************************** --> <div id="PopupPanel" style="display:none"> <iframe class="PopupPanelModalArea" frameborder="0" scrolling="0" id="PopupPanelModalArea"></iframe> <div class="PopupPanel"> <p class="TitleBar"> Popup Panel Title Bar </p> <p class="ContentArea"> Even though the underlying page is disabled, you can however use the controls in this area <br/> <br/> <select> <option value="0">-- Select --</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <br/> <br/> <input type="Button" value="Close Popup Panel" onclick="TogglePopupPanel()" /> </p> </div> </div> <br/> </body> </html>
Hope this helps
Good Luck
Categories: ASP.Net, CSS, Javascript
Recent Comments