1 CSS
<style type="text/css">
#ModalDialogContainer
{
600px;
margin: 50px auto;
z-index: 999;
position: absolute;
border: 1px solid #ccc;
border-right: 3px solid #e0e0e0;
border-bottom: 3px solid #e0e0e0;
backgroud-color: #fff;
}
.ModalDialog
{
padding: 0px;
background-color: #fff;
font-family: Calibri;
font-size: 12px;
}
.ModalDialog .ModalDialogClose
{
float: right;
display: block;
color: #fff;
font-size: 13px;
text-decoration: none;
font-family: Tahoma;
padding: 0px 4px;
}
.ModalDialog .Header
{
background-color: #87CEEB;
100%;
line-height: 30px;
height: 30px;
color: #008080;
border-bottom: 1px solid #4682b4;
}
.ModalDialog .Title
{
float: left;
font-weight: bold;
text-indent: 10px;
}
.ModalDialog .Content
{
clear: both;
background-color: #f5fffa;
padding: 10px;
max-height: 450px;
height: 400px;
overflow-y: scroll;
}
.ModalDialog .Bottom
{
background-color: #eeeeee;
border-top: 1px solid #ccc;
}
</style>
2 HTML
<asp:Button ID="btn_Previous" Text="Previous e-mail" runat="server" OnClientClick="PreviousAnswer();return false;" />
<div id="ModalDialogContainer" style="display: none;">
<div class="ModalDialog">
<div class="Header">
<div class="Title">
Previous Answer Dialog
</div>
<a href="javascript:CloseModalDialog();" id="DialogCloseButton" class="ModalDialogClose">
X </a>
</div>
<div id="ContentContainer" class="Content">
</div>
<div class="Bottom">
</div>
</div>
</div>
3 脚本
<script language ="javascript" defer="defer">
function $( id )
{
return document.getElementById( id );
}
function PreviousAnswer( )
{
//获取要显示的内容
var content ="content test.";
ShowModalDialog( content );
}
function ShowModalDialog( content )
{
var dialogContainer = $("ModalDialogContainer");
dialogContainer.style.display = "block";
var left = ( window.screen.width - dialogContainer.scrollWidth )/2;
var top =210;
dialogContainer.style.left = left+"px";
dialogContainer.style.top = top+"px";
$("ContentContainer").innerHTML = content;
}
function CloseModalDialog()
{
$('ModalDialogContainer').style.display='none';
}
</script>