jQuery之 弹出对话框

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>