.ModalPopupStyle{background-color: #FFFFFF;}
.modalBackground
{
background-color: Black;
filter: alpha(opacity=70);
opacity: 0.7;
}
.RoundedCornerTop_Left
{
background-image: url(newimages/top_left.png);
width: 10px;
height: 21px;
background-repeat: no-repeat;
}
.RoundedCornerBottom_Left
{
background-image: url(newimages/bottom_left.png);
width: 10px;
height: 10px;
background-repeat: no-repeat;
}
.RoundedCornerBottom_Right
{
background-image: url(newimages/bottom_right.png);
width: 21px;
height: 10px;
background-repeat: no-repeat;
}
Javascript:
function ShowModalPopup(div) {
$("modalbackgroundElement").style.width = "1261px"; $("modalbackgroundElement").style.position = "fixed"; $("modalbackgroundElement").style.left = "0px"; $("modalbackgroundElement").style.top = "0px"; $("modalbackgroundElement").style.zIndex = "10000"; $("modalbackgroundElement").style.width = screen.width + "px"; $("modalbackgroundElement").style.height = screen.height + "px"; var w = (getWindowWidth() - document.getElementById(div).style.width.substring(0, document.getElementById(div).style.width.indexOf("px"))) / 2; var h = (getWindowHeight() - document.getElementById(div).style.height.substring(0, document.getElementById(div).style.height.indexOf("px"))) / 2 + document.body.scrollTop; $(div).style.top = h + "px"; $(div).style.left = w + "px"; $(div).style.display = "block"; $("modalbackgroundElement").style.display = "block"; $("divBack").style.top = $(div).style.top; $("divBack").style.left = $(div).style.left; $("divBack").style.width = $(div).style.width; $("divBack").style.height = $(div).style.height; $("divBack").style.zIndex = "10001"; $("divBack").style.position = "fixed"; $("divBack").style.margin = "10px"; $("divBack").style.display = "none"; poll_div = div; poll_left = w; poll_top = h;
var myPageY = 0;
if (document.all) { myPageY = document.documentElement.scrollTop; }
else { myPageY = window.pageYOffset; }
poll_h = myPageY;
h = (getWindowHeight() - document.getElementById(div).style.height.substring(0, document.getElementById(div).style.height.indexOf("px"))) / 2;
$(div).style.top = (h) + "px";
return false;
}
function $(id) { if (id == "") { return null; } else { return document.getElementById(id); } }
function getWindowHeight() {
var windowHeight = 0; if (typeof (window.innerHeight) == 'number') { windowHeight = window.innerHeight; }
else {
if (document.documentElement && document.documentElement.clientHeight) { windowHeight = document.documentElement.clientHeight; }
else { if (document.body && document.body.clientHeight) { windowHeight = document.body.clientHeight; } }
}
return windowHeight;
}
function getWindowWidth() {
var windowWidth = 0; if (typeof (window.innerWidth) == 'number') { windowWidth = window.innerWidth; }
else {
if (document.documentElement && document.documentElement.clientWidth) { windowWidth = document.documentElement.clientWidth; }
else { if (document.body && document.body.clientWidth) { windowWidth = document.body.clientWidth; } }
}
return windowWidth;
}
HTML:
<div id="divBack" style="background-color: #000000; position: absolute; z-index: 100001;">
</div>
<div id="modalbackgroundElement" class="modalBackground">
</div>
<div id="divModal" style="display: none; position: fixed; z-index: 100002; width: 275px;
height: 200px;">
<table cellpadding="0" cellspacing="0" border="0" width="275">
<tr valign="bottom">
<td class="RoundedCornerTop_Left" width="10px" height="21px">
</td>
<td style="background-image: url(newimages/space_cut12.png); background-repeat: repeat-x;
padding-right: 15px" valign="bottom" width="254" align="right">
<span id="required">* </span><span class="require23">Required fields</span>
</td>
<td valign="bottom" width="21">
<a href="#" style="text-decoration: none" onclick="javascript:return CloseContactForm();">
<img src="newimages/close_btn_16.png" alt="close" border="0" style="vertical-align: bottom"
width="21" height="21" /></a>
</td>
</tr>
<tr valign="top" style="width: 254">
<td colspan="3" class="ModalPopupStyle">
<uc1:TaskDetail ID="ContactDetails1" runat="server" strValue="2" />
</td>
</tr>
<tr>
<td class="RoundedCornerBottom_Left">
</td>
<td style="width: 254px; background-color: #fff">
</td>
<td class="RoundedCornerBottom_Right">
</td>
</tr>
</table>
</div>