Archive

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