Smart Programming in .NET: Simple Modal Popup using Javascript which works in sharepoint and ASP.NET

Wednesday, September 23, 2009

Simple Modal Popup using Javascript which works in sharepoint and ASP.NET

Here is the code for simple modal popup using Javascript which works in sharepoint as well as ASP.NET

<div id='modal' style='position: absolute; top: 0px; left: 0px; display: none; z-index: 9;
    background-color: #383838; filter: alpha(opacity=60);'>
</div>
<div id='chart' style='position: absolute; top: 100px; left: 180px; display: none;
    z-index: 10;'>
    <asp:Button ID="btnYes" runat ="server" Text ="Yes" OnClick ="btnYes_Click" />
    <button onclick="javascript:document.getElementById('modal').style.display='none';document.getElementById('chart').style.display='none';">
        CANCEL</button>
    <br />
    <br />
</div>
<a href='#' onclick="javascript:document.getElementById('modal').style.width = document.body.clientWidth + 'px';document.getElementById('modal').style.height = document.body.clientHeight + 'px';document.getElementById('modal').style.display='block';document.getElementById('chart').style.display='block';">
<asp:Label ID="lblClick" runat ="server" Text ="Click Me"></asp:Label>
</a>

To get this code working properly in ASP.NET remove the following code in .aspx pages

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">