none
我怎么才能使浮动层,在上下拖动浏览器的时候始终居中,请指点,谢谢! RRS feed

  • 问题

  • 点击系统菜单,弹出层,还有把鼠标移动到最左侧,层会自己弹出来的样式,是怎么实现的?
    <%@ Page Language="C#" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
    <script type="text/javascript">
    if (typeof Platform == 'undefined') var Platform = {};
    // 浏览器类型获取.
    Platform.getUserAgent = navigator.userAgent;
    Platform.isGecko = Platform.getUserAgent.indexOf("Gecko") != -1;
    Platform.isOpera = Platform.getUserAgent.indexOf("Opera") != -1;
    Platform.isIE = Platform.getUserAgent.indexOf("MSIE") != -1;

    var LoginUI = !!window.LoginUI || {};
    function $(id)
    {
     return document.getElementById(id)
    }
    LoginUI.getViewportWidth = function(){
     var width=0;
     if(document.documentElement && document.documentElement.clientWidth){
     width=document.documentElement.clientWidth;}
     else if(document.body && document.body.clientWidth){
     width=document.body.clientWidth;}
     else if(window.innerWidth){
     width=window.innerWidth-18;}
     return width;
    }


    LoginUI.getViewportHeight = function() {
     var height=0;
     if(window.innerHeight){
     height=window.innerHeight-18;}
     else if(document.documentElement&&document.documentElement.clientHeight){
     height=document.documentElement.clientHeight;}
     else if(document.body&&document.body.clientHeight){
     height=document.body.clientHeight;}
     return height;
    }

    LoginUI.getViewportScrollX = function(){
     var scrollX=0;
     if(document.documentElement&&document.documentElement.scrollLeft){
     scrollX=document.documentElement.scrollLeft;}
     else if(document.body&&document.body.scrollLeft){
     scrollX=document.body.scrollLeft;}
     else if(window.pageXOffset){
     scrollX=window.pageXOffset;}
     else if(window.scrollX){
     scrollX=window.scrollX;}
     return scrollX;
    }

    LoginUI.getViewportScrollY=function() {
     var scrollY=0;
     if(document.documentElement&&document.documentElement.scrollTop){
     scrollY=document.documentElement.scrollTop;}
     else if(document.body&&document.body.scrollTop){
     scrollY=document.body.scrollTop;}
     else if(window.pageYOffset){
     scrollY=window.pageYOffset;}
     else if(window.scrollY){
     scrollY=window.scrollY;}
     return scrollY;
    }
    function scrollMsgTip()
    {
     var t = LoginUI.getViewportHeight() + LoginUI.getViewportScrollY() - $("msgtip").offsetHeight;
     if(!Platform.isIE)
     {
      t += 16;
     }
     
     $("msgtip").style.top = t + "px";
     $("msgtip").style.right = LoginUI.getViewportWidth() + LoginUI.getViewportScrollX() - $("msgtip").offsetWidth + "px";

    }

    function scrollTip()
    {
     scrollMsgTip()
    }

    </script>

     

        <style type="text/css">
            .black_overlay1{
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 16%;
                height: 100%;
                background-color: white;
                z-index:1001;
                -moz-opacity: 0.8;
                opacity:.80;
                filter: alpha(opacity=80);
            }
            .white_content1 {
                display: none;
                position: absolute;
                top: 23%;
                left: 0%;
                width:13%;
                height: 50%;
                padding: 16px;
                border: 2px solid black;
                background-color: white;
                z-index:1002;
                overflow: auto;
            }
     </style>
        <style type="text/css">
            .black_overlay{
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: white;
                z-index:1001;
                -moz-opacity: 0.8;
                opacity:.80;
                filter: alpha(opacity=80);
            }
            .white_content {
                display: none;
                position: absolute;
                top: 20%;
                left: 20%;
                width: 60%;
                height: 50%;
                padding: 16px;
                border: 2px solid #5D7B9D;
                background-color: white;
                z-index:1002;
                overflow: auto;
               
                }
            .boxCloseButton {
            float:right;
            cursor:pointer;
            padding:6px;
            font-family:Fixedsys;
       
            }   
           
             </style>
      
        <link href="../css/default.css" rel="Stylesheet" type="text/css" />
    </head>
    <body>
        <asp:Table ID="tblLogo" BorderStyle="None" Width="997px" CellPadding="0" CellSpacing="0"
            HorizontalAlign="center" Height="132px" runat="server">
          
                        <asp:TableRow>
                        <asp:TableCell Width="97px" HorizontalAlign="Center" CssClass="China-12-333333-20"
                                Height="33px">
      <a href="javascript:void(0)" style="color:Red" onclick="document.getElementById('msgtip').style.display='block';scrollTip(); "> 系统菜单</a>
                              
                        </asp:TableCell>
                            </asp:TableRow>            
        </asp:Table>
        <br />
        <div  class="white_content1" id="msgtip">
         <asp:Table ID="Table1" BorderStyle="None" Width="160px" CellPadding="0" CellSpacing="0"
                HorizontalAlign="center" Height="132px" runat="server">
                <asp:TableRow ID="TableRow2">
                    <asp:TableCell HorizontalAlign="Center" ColumnSpan="2" VerticalAlign="Middle">
                                  <input id="Button2" style="width:80px;"  type="button" value="关闭" onclick="document.getElementById('msgtip').style.display='none';" />
                    </asp:TableCell>
                </asp:TableRow>         
            </asp:Table>
        </div>

         <br />
       
        <div id="fade" class="black_overlay1">
        </div>
       <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    </body>
    <script type="text/javascript">
    scrollTip();
    window.onscroll = scrollTip;
    </script>

     

    2009年5月4日 7:03

答案

  • <%@ Page Language="C#" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
    <script type="text/javascript">
    if (typeof Platform == 'undefined') var Platform = {};
    // 浏览器类型获取.
    Platform.getUserAgent = navigator.userAgent;
    Platform.isGecko = Platform.getUserAgent.indexOf("Gecko") != -1;
    Platform.isOpera = Platform.getUserAgent.indexOf("Opera") != -1;
    Platform.isIE = Platform.getUserAgent.indexOf("MSIE") != -1;
    
    var LoginUI = !!window.LoginUI || {};
    function $(id)
    {
     return document.getElementById(id)
    }
    LoginUI.getViewportWidth = function(){
     var width=0;
     if(document.documentElement && document.documentElement.clientWidth){
     width=document.documentElement.clientWidth;}
     else if(document.body && document.body.clientWidth){
     width=document.body.clientWidth;}
     else if(window.innerWidth){
     width=window.innerWidth-18;}
     return width;
    }
    
    
    LoginUI.getViewportHeight = function() {
     var height=0;
     if(window.innerHeight){
     height=window.innerHeight-18;}
     else if(document.documentElement&&document.documentElement.clientHeight){
     height=document.documentElement.clientHeight;}
     else if(document.body&&document.body.clientHeight){
     height=document.body.clientHeight;}
     return height;
    }
    
    LoginUI.getViewportScrollX = function(){
     var scrollX=0;
     if(document.documentElement&&document.documentElement.scrollLeft){
     scrollX=document.documentElement.scrollLeft;}
     else if(document.body&&document.body.scrollLeft){
     scrollX=document.body.scrollLeft;}
     else if(window.pageXOffset){
     scrollX=window.pageXOffset;}
     else if(window.scrollX){
     scrollX=window.scrollX;}
     return scrollX;
    }
    
    LoginUI.getViewportScrollY=function() {
     var scrollY=0;
     if(document.documentElement&&document.documentElement.scrollTop){
     scrollY=document.documentElement.scrollTop;}
     else if(document.body&&document.body.scrollTop){
     scrollY=document.body.scrollTop;}
     else if(window.pageYOffset){
     scrollY=window.pageYOffset;}
     else if(window.scrollY){
     scrollY=window.scrollY;}
     return scrollY;
    }
    
    LoginUI.centerDiv = function(div)
    {
    	var top=((LoginUI.getViewportHeight()-div.offsetHeight)/2);
    	if(top<0)top=10;
    	div.style.left=((LoginUI.getViewportWidth()-div.offsetWidth)/2)+"px";
    	div.style.top=top+LoginUI.getViewportScrollY()+"px";
    }
    
    function scrollMsgTip()
    {
      LoginUI.centerDiv($("msgtip"));
    }
    
    function scrollTip()
    {
     scrollMsgTip()
    }
    
    </script>
    
     
    
        <style type="text/css">
            .black_overlay1{
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 16%;
                height: 100%;
                background-color: white;
                z-index:1001;
                -moz-opacity: 0.8;
                opacity:.80;
                filter: alpha(opacity=80);
            }
            .white_content1 {
                display: none;
                position: absolute;
                top: 23%;
                left: 0%;
                width:13%;
                height: 50%;
                padding: 16px;
                border: 2px solid black;
                background-color: white;
                z-index:1002;
                overflow: auto;
            }
     </style>
        <style type="text/css">
            .black_overlay{
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: white;
                z-index:1001;
                -moz-opacity: 0.8;
                opacity:.80;
                filter: alpha(opacity=80);
            }
            .white_content {
                display: none;
                position: absolute;
                top: 20%;
                left: 20%;
                width: 60%;
                height: 50%;
                padding: 16px;
                border: 2px solid #5D7B9D;
                background-color: white;
                z-index:1002;
                overflow: auto;
               
                }
            .boxCloseButton {
            float:right;
            cursor:pointer;
            padding:6px;
            font-family:Fixedsys;
       
            }   
           
             </style>
      
        <link href="../css/default.css" rel="Stylesheet" type="text/css" />
    </head>
    <body>
        <asp:Table ID="tblLogo" BorderStyle="None" Width="997px" CellPadding="0" CellSpacing="0"
            HorizontalAlign="center" Height="132px" runat="server">
          
                        <asp:TableRow>
                        <asp:TableCell Width="97px" HorizontalAlign="Center" CssClass="China-12-333333-20"
                                Height="33px">
      <a href="javascript:void(0)" style="color:Red" onclick="document.getElementById('msgtip').style.display='block';scrollTip(); "> 系统
    
    菜单</a>
                              
                        </asp:TableCell>
                            </asp:TableRow>            
        </asp:Table>
        <br />
        <div  class="white_content1" id="msgtip">
         <asp:Table ID="Table1" BorderStyle="None" Width="160px" CellPadding="0" CellSpacing="0"
                HorizontalAlign="center" Height="132px" runat="server">
                <asp:TableRow ID="TableRow2">
                    <asp:TableCell HorizontalAlign="Center" ColumnSpan="2" VerticalAlign="Middle">
                                  <input id="Button2" style="width:80px;"  type="button" value="关闭" onclick="document.getElementById
    
    ('msgtip').style.display='none';" />
                    </asp:TableCell>
                </asp:TableRow>         
            </asp:Table>
        </div>
    
         <br />
       
        <div id="fade" class="black_overlay1">
        </div>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    </body>
    <script type="text/javascript">
    scrollTip();
    window.onscroll = scrollTip;
    </script>
    把鼠标移动到最左侧,层会自己弹出来的样式,是怎么实现的?
    跟鼠标点击类似,只是换成onmouseover就可以了。道理都是类似的,就是设置left的值
    【孟子E章】
    2009年5月4日 7:43
    版主

全部回复

  • <%@ Page Language="C#" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
    <script type="text/javascript">
    if (typeof Platform == 'undefined') var Platform = {};
    // 浏览器类型获取.
    Platform.getUserAgent = navigator.userAgent;
    Platform.isGecko = Platform.getUserAgent.indexOf("Gecko") != -1;
    Platform.isOpera = Platform.getUserAgent.indexOf("Opera") != -1;
    Platform.isIE = Platform.getUserAgent.indexOf("MSIE") != -1;
    
    var LoginUI = !!window.LoginUI || {};
    function $(id)
    {
     return document.getElementById(id)
    }
    LoginUI.getViewportWidth = function(){
     var width=0;
     if(document.documentElement && document.documentElement.clientWidth){
     width=document.documentElement.clientWidth;}
     else if(document.body && document.body.clientWidth){
     width=document.body.clientWidth;}
     else if(window.innerWidth){
     width=window.innerWidth-18;}
     return width;
    }
    
    
    LoginUI.getViewportHeight = function() {
     var height=0;
     if(window.innerHeight){
     height=window.innerHeight-18;}
     else if(document.documentElement&&document.documentElement.clientHeight){
     height=document.documentElement.clientHeight;}
     else if(document.body&&document.body.clientHeight){
     height=document.body.clientHeight;}
     return height;
    }
    
    LoginUI.getViewportScrollX = function(){
     var scrollX=0;
     if(document.documentElement&&document.documentElement.scrollLeft){
     scrollX=document.documentElement.scrollLeft;}
     else if(document.body&&document.body.scrollLeft){
     scrollX=document.body.scrollLeft;}
     else if(window.pageXOffset){
     scrollX=window.pageXOffset;}
     else if(window.scrollX){
     scrollX=window.scrollX;}
     return scrollX;
    }
    
    LoginUI.getViewportScrollY=function() {
     var scrollY=0;
     if(document.documentElement&&document.documentElement.scrollTop){
     scrollY=document.documentElement.scrollTop;}
     else if(document.body&&document.body.scrollTop){
     scrollY=document.body.scrollTop;}
     else if(window.pageYOffset){
     scrollY=window.pageYOffset;}
     else if(window.scrollY){
     scrollY=window.scrollY;}
     return scrollY;
    }
    
    LoginUI.centerDiv = function(div)
    {
    	var top=((LoginUI.getViewportHeight()-div.offsetHeight)/2);
    	if(top<0)top=10;
    	div.style.left=((LoginUI.getViewportWidth()-div.offsetWidth)/2)+"px";
    	div.style.top=top+LoginUI.getViewportScrollY()+"px";
    }
    
    function scrollMsgTip()
    {
      LoginUI.centerDiv($("msgtip"));
    }
    
    function scrollTip()
    {
     scrollMsgTip()
    }
    
    </script>
    
     
    
        <style type="text/css">
            .black_overlay1{
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 16%;
                height: 100%;
                background-color: white;
                z-index:1001;
                -moz-opacity: 0.8;
                opacity:.80;
                filter: alpha(opacity=80);
            }
            .white_content1 {
                display: none;
                position: absolute;
                top: 23%;
                left: 0%;
                width:13%;
                height: 50%;
                padding: 16px;
                border: 2px solid black;
                background-color: white;
                z-index:1002;
                overflow: auto;
            }
     </style>
        <style type="text/css">
            .black_overlay{
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: white;
                z-index:1001;
                -moz-opacity: 0.8;
                opacity:.80;
                filter: alpha(opacity=80);
            }
            .white_content {
                display: none;
                position: absolute;
                top: 20%;
                left: 20%;
                width: 60%;
                height: 50%;
                padding: 16px;
                border: 2px solid #5D7B9D;
                background-color: white;
                z-index:1002;
                overflow: auto;
               
                }
            .boxCloseButton {
            float:right;
            cursor:pointer;
            padding:6px;
            font-family:Fixedsys;
       
            }   
           
             </style>
      
        <link href="../css/default.css" rel="Stylesheet" type="text/css" />
    </head>
    <body>
        <asp:Table ID="tblLogo" BorderStyle="None" Width="997px" CellPadding="0" CellSpacing="0"
            HorizontalAlign="center" Height="132px" runat="server">
          
                        <asp:TableRow>
                        <asp:TableCell Width="97px" HorizontalAlign="Center" CssClass="China-12-333333-20"
                                Height="33px">
      <a href="javascript:void(0)" style="color:Red" onclick="document.getElementById('msgtip').style.display='block';scrollTip(); "> 系统
    
    菜单</a>
                              
                        </asp:TableCell>
                            </asp:TableRow>            
        </asp:Table>
        <br />
        <div  class="white_content1" id="msgtip">
         <asp:Table ID="Table1" BorderStyle="None" Width="160px" CellPadding="0" CellSpacing="0"
                HorizontalAlign="center" Height="132px" runat="server">
                <asp:TableRow ID="TableRow2">
                    <asp:TableCell HorizontalAlign="Center" ColumnSpan="2" VerticalAlign="Middle">
                                  <input id="Button2" style="width:80px;"  type="button" value="关闭" onclick="document.getElementById
    
    ('msgtip').style.display='none';" />
                    </asp:TableCell>
                </asp:TableRow>         
            </asp:Table>
        </div>
    
         <br />
       
        <div id="fade" class="black_overlay1">
        </div>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容
    
    </p>
    </body>
    <script type="text/javascript">
    scrollTip();
    window.onscroll = scrollTip;
    </script>
    把鼠标移动到最左侧,层会自己弹出来的样式,是怎么实现的?
    跟鼠标点击类似,只是换成onmouseover就可以了。道理都是类似的,就是设置left的值
    【孟子E章】
    2009年5月4日 7:43
    版主
  • 跟鼠标点击类似,只是换成onmouseover就可以了。道理都是类似的,就是设置left的值
    不好意思,孟兄,试了一下午还是没有弄出来,劳驾指点一下吧!
    2009年5月4日 9:19
  • 楼主,你好

    一般都是做一个类似于停靠在在最左端的工具栏一样,加上mouseover事件处理。
    e.g

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.IO" %>

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

    <script runat="server">

     
       
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript">
    if (typeof Platform == 'undefined') var Platform = {};
    // 浏览器类型获取.
    Platform.getUserAgent = navigator.userAgent;
    Platform.isGecko = Platform.getUserAgent.indexOf("Gecko") != -1;
    Platform.isOpera = Platform.getUserAgent.indexOf("Opera") != -1;
    Platform.isIE = Platform.getUserAgent.indexOf("MSIE") != -1;

    var LoginUI = !!window.LoginUI || {};
    function $(id)
    {
     return document.getElementById(id)
    }
    LoginUI.getViewportWidth = function(){
     var width=0;
     if(document.documentElement && document.documentElement.clientWidth){
     width=document.documentElement.clientWidth;}
     else if(document.body && document.body.clientWidth){
     width=document.body.clientWidth;}
     else if(window.innerWidth){
     width=window.innerWidth-18;}
     return width;
    }


    LoginUI.getViewportHeight = function() {
     var height=0;
     if(window.innerHeight){
     height=window.innerHeight-18;}
     else if(document.documentElement&&document.documentElement.clientHeight){
     height=document.documentElement.clientHeight;}
     else if(document.body&&document.body.clientHeight){
     height=document.body.clientHeight;}
     return height;
    }

    LoginUI.getViewportScrollX = function(){
     var scrollX=0;
     if(document.documentElement&&document.documentElement.scrollLeft){
     scrollX=document.documentElement.scrollLeft;}
     else if(document.body&&document.body.scrollLeft){
     scrollX=document.body.scrollLeft;}
     else if(window.pageXOffset){
     scrollX=window.pageXOffset;}
     else if(window.scrollX){
     scrollX=window.scrollX;}
     return scrollX;
    }

    LoginUI.getViewportScrollY=function() {
     var scrollY=0;
     if(document.documentElement&&document.documentElement.scrollTop){
     scrollY=document.documentElement.scrollTop;}
     else if(document.body&&document.body.scrollTop){
     scrollY=document.body.scrollTop;}
     else if(window.pageYOffset){
     scrollY=window.pageYOffset;}
     else if(window.scrollY){
     scrollY=window.scrollY;}
     return scrollY;
    }

    LoginUI.centerDiv = function(div)
    {
     var top=((LoginUI.getViewportHeight()-div.offsetHeight)/2);
     if(top<0)top=10;
     div.style.left=((LoginUI.getViewportWidth()-div.offsetWidth)/2)+"px";
     div.style.top=top+LoginUI.getViewportScrollY()+"px";
    }

    function scrollMsgTip()
    {
      LoginUI.centerDiv($("msgtip"));
    }

    function scrollTip()
    {
     scrollMsgTip()
    }

    </script>

     

        <style type="text/css">
            .black_overlay1{
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 16%;
                height: 100%;
                background-color: white;
                z-index:1001;
                -moz-opacity: 0.8;
                opacity:.80;
                filter: alpha(opacity=80);
            }
            .white_content1 {
                display: none;
                position: absolute;
                top: 23%;
                left: 0%;
                width:13%;
                height: 50%;
                padding: 16px;
                border: 2px solid black;
                background-color: white;
                z-index:1002;
                overflow: auto;
            }
     </style>
        <style type="text/css">
            .black_overlay{
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: white;
                z-index:1001;
                -moz-opacity: 0.8;
                opacity:.80;
                filter: alpha(opacity=80);
            }
            .white_content {
                display: none;
                position: absolute;
                top: 20%;
                left: 20%;
                width: 60%;
                height: 50%;
                padding: 16px;
                border: 2px solid #5D7B9D;
                background-color: white;
                z-index:1002;
                overflow: auto;
              
                }
            .boxCloseButton {
            float:right;
            cursor:pointer;
            padding:6px;
            font-family:Fixedsys;
      
            }  
          
             </style>
     

    </head>
    <body>
        <form id="form1" runat="server">
       <table>
        <tr>
        <td style="background-color:Black" onmouseover="document.getElementById('msgtip').style.display='block';scrollTip(); "></td>
        <td>
       
       
        <asp:Table ID="tblLogo" BorderStyle="None" Width="997px" CellPadding="0" CellSpacing="0"
            HorizontalAlign="center" Height="132px" runat="server">
         
                        <asp:TableRow>
                        <asp:TableCell Width="97px" HorizontalAlign="Center" CssClass="China-12-333333-20"
                                Height="33px">
      <a href="javascript:void(0)" style="color:Red" onclick="document.getElementById('msgtip').style.display='block';scrollTip(); "> 系统

    菜单</a>
                             
                        </asp:TableCell>
                            </asp:TableRow>           
        </asp:Table>
        <br />
        <div  class="white_content1" id="msgtip">
         <asp:Table ID="Table1" BorderStyle="None" Width="160px" CellPadding="0" CellSpacing="0"
                HorizontalAlign="center" Height="132px" runat="server">
                <asp:TableRow ID="TableRow2">
                    <asp:TableCell HorizontalAlign="Center" ColumnSpan="2" VerticalAlign="Middle">
                                  <input id="Button2" style="width:80px;"  type="button" value="关闭" onclick="document.getElementById

    ('msgtip').style.display='none';" />
                    </asp:TableCell>
                </asp:TableRow>        
            </asp:Table>
        </div>

         <br />
      
        <div id="fade" class="black_overlay1">
        </div>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容

    </p>

       
        </td>
        </tr>
      
      
       </table>
        </form>
    </body>
    </html>


    Microsoft Online Community Support
    2009年5月5日 6:43
  • 为什么我显示图层会抖动??当我的鼠标在层上移动的时候,层好像在刷新一样!为什么会这样,请你帮我看看!谢谢!
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.IO" %>

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

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <script type="text/javascript">
    if (typeof Platform == 'undefined') var Platform = {};
    // 浏览器类型获取.
    Platform.getUserAgent = navigator.userAgent;
    Platform.isGecko = Platform.getUserAgent.indexOf("Gecko") != -1;
    Platform.isOpera = Platform.getUserAgent.indexOf("Opera") != -1;
    Platform.isIE = Platform.getUserAgent.indexOf("MSIE") != -1;

    var LoginUI = !!window.LoginUI || {};
    function $(id)
    {
     return document.getElementById(id)
    }
    LoginUI.getViewportWidth = function(){
     var width=0;
     if(document.documentElement && document.documentElement.clientWidth){
     width=document.documentElement.clientWidth;}
     else if(document.body && document.body.clientWidth){
     width=document.body.clientWidth;}
     else if(window.innerWidth){
     width=window.innerWidth-18;}
     return width;
    }
    LoginUI.getViewportHeight = function() {
     var height=0;
     if(window.innerHeight){
     height=window.innerHeight-18;}
     else if(document.documentElement&&document.documentElement.clientHeight){
     height=document.documentElement.clientHeight;}
     else if(document.body&&document.body.clientHeight){
     height=document.body.clientHeight;}
     return height;
    }
    LoginUI.getViewportScrollX = function(){
     var scrollX=0;
     if(document.documentElement&&document.documentElement.scrollLeft){
     scrollX=document.documentElement.scrollLeft;}
     else if(document.body&&document.body.scrollLeft){
     scrollX=document.body.scrollLeft;}
     else if(window.pageXOffset){
     scrollX=window.pageXOffset;}
     else if(window.scrollX){
     scrollX=window.scrollX;}
     return scrollX;
    }
    LoginUI.getViewportScrollY=function() {
     var scrollY=0;
     if(document.documentElement&&document.documentElement.scrollTop){
     scrollY=document.documentElement.scrollTop;}
     else if(document.body&&document.body.scrollTop){
     scrollY=document.body.scrollTop;}
     else if(window.pageYOffset){
     scrollY=window.pageYOffset;}
     else if(window.scrollY){
     scrollY=window.scrollY;}
     return scrollY;
    }
    LoginUI.centerDiv = function(div)
    {
     var top=((LoginUI.getViewportHeight()-div.offsetHeight)/2);
     if(top<0)top=100;
     //div.style.left=((LoginUI.getViewportWidth()-div.offsetWidth)/2)+"px";
     div.style.top=top+LoginUI.getViewportScrollY()+"px";
    }
    function scrollMsgTip()
    {
      LoginUI.centerDiv($("msgtip"));

    }
    function scrollTip()
    {
     scrollMsgTip()
    }
    </script>
        <style type="text/css">
            .white_content1 {
                display: block;
                position: absolute;
                top: 23%;
                left: 0%;
                width:5px;
                height: 300px;
                padding: 16px;        
                background-color: white;
                z-index:1002;
                overflow: auto;
                filter: alpha(opacity=80);
            }
                             
             </style>
        <style type="text/css">
                        .GridViewStyle
                   {  
                        border-right: 2px solid #A7A6AA;
                        border-bottom: 2px solid #A7A6AA;
                        border-left: 2px solid white;
                        border-top: 2px solid white;
                        padding: 4px;
                    }

                    .GridViewStyle a
                    {
                        color: #FFFFFF;
                    }

                    .GridViewHeaderStyle th
                    {
                        border-left: 1px solid #EBE9ED;
                        border-right: 1px solid #EBE9ED;
                    }

                    .GridViewHeaderStyle
                    {
                        background-color: #5D7B9D;
                        font-weight: bold;
                        color: White;
                    }

                    .GridViewFooterStyle
                    {
                        background-color: #5D7B9D;
                        font-weight: bold;
                        color: White;
                    }

                    .GridViewRowStyle
                    {
                        background-color: #F7F6F3;
                        color: #333333;
                    }

                    .GridViewAlternatingRowStyle
                    {
                        background-color: #FFFFFF;
                        color: #284775;
                    }

                    .GridViewRowStyle td, .GridViewAlternatingRowStyle td
                    {
                        border: 1px solid #EBE9ED;
                    }

                    .GridViewSelectedRowStyle
                    {
                        background-color: #E2DED6;
                        font-weight: bold;
                        color: #333333;
                    }

                    .GridViewPagerStyle
                    {
                        background-color: #284775;
                        color: #FFFFFF;
                    }

                    .GridViewPagerStyle table /**//* to center the paging links*/
                    {
                        margin: 0 auto 0 auto;
                    }
                   
        </style>
        <title>服务中心管理</title>
        <link href="../css/default.css" rel="Stylesheet" type="text/css" />
    </head>
    <body>
        <asp:Table ID="tblLogo" BorderStyle="None" Width="997px" CellPadding="0" CellSpacing="0"
            HorizontalAlign="center" Height="132px" runat="server">
          
            <asp:TableRow>
                <asp:TableCell ID="Cell5" HorizontalAlign="Left" Height="38px">
                    <asp:Table ID="tblMenu" Width="100%" BorderStyle="None" CellPadding="0" CellSpacing="0"
                        runat="server">
                        <asp:TableRow>
                        <asp:TableCell Width="97px" HorizontalAlign="Center" CssClass="China-12-333333-20"
                                Height="33px">
                               
                                <a href="javascript:void(0)" style="color:Red; font-weight:bold" onmouseover="document.getElementById('msgtip').style.display='block';scrollTip(); "> 项目菜单</a>
                              
                       </asp:TableCell>
                            
                        </asp:TableRow>
                      
                    </asp:Table>
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
        <br />
       
        <div  class="white_content1" id="msgtip" onmouseout="document.getElementById('msgtip').style.width='5px';scrollTip();"onmouseover="document.getElementById('msgtip').style.width='150px';scrollTip();">
         <asp:Table ID="Table1" BorderStyle="None" Width="100px" CellPadding="0" CellSpacing="0"
                HorizontalAlign="center" Height="132px" runat="server">
                <asp:TableRow ID="TableRow2">
                    <asp:TableCell HorizontalAlign="Center" ColumnSpan="2" VerticalAlign="Middle">
                                  <input id="Button2" style="width:80px; font-weight:bold;"  type="button" value="关闭" onmouseout="this.style.color='blue'"   onmouseover="this.style.color='red'" onclick="document.getElementById('msgtip').style.display='none';" />
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow ID="TableRow3">
                    <asp:TableCell HorizontalAlign="Center" Width="16px">
                        <asp:Image ID="Image2" ImageUrl="../Image/icon/107.gif" runat="server" />
                    </asp:TableCell>
                    <asp:TableCell HorizontalAlign="Center" VerticalAlign="Middle">
                        <asp:HyperLink ID="HyperLink10" runat="server" NavigateUrl="../ProjectInfo/ProjectAdd.aspx"
                            Target="_top" Font-Bold="true" Text="添加项目信息" />
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow ID="TableRow4">
                    <asp:TableCell HorizontalAlign="Center" Width="16px">
                        <asp:Image ID="Image3" ImageUrl="../Image/icon/107.gif" runat="server" />
                    </asp:TableCell>
                    <asp:TableCell HorizontalAlign="Center" VerticalAlign="Middle">
                        <asp:HyperLink ID="HyperLink12" runat="server" Font-Bold="true"  NavigateUrl="../ProjectInfo/SQ_passcardview.aspx"
                            Target="_top" Text="售前信息流转" />
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
        </div>

         <br />
       
       
        <form id="form1" runat="server">
            <asp:Table ID="tblContent" BorderStyle="None" Width="997px" CellPadding="0" CellSpacing="0"
                HorizontalAlign="center" Height="132px" runat="server">
                <asp:TableRow>
                    <asp:TableCell Width="797px" VerticalAlign="Top" HorizontalAlign="Center">
                       
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
            <br />
        </form>
        <hr style="width: 997px; border: solid 2px green" />
        <br />
        <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容

    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容

    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容

    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容

    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容

    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容

    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容

    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容

    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容

    </p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容

    </p>

    </body>
    <script type="text/javascript">
    scrollTip();
    window.onscroll = scrollTip;
    </script>
    </html>

    2009年5月5日 8:42
  • 你要不想抖动。,可以将
      <div  class="white_content1" id="msgtip" onmouseout="document.getElementById('msgtip').style.width='5px';scrollTip();"onmouseover="document.getElementById('msgtip').style.width='150px';scrollTip();">


    中的 onmouseout 去掉。

    出现抖动是因为连续多次触发了onmouseout  onmouseover 事件造成的
    【孟子E章】
    2009年5月5日 9:05
    版主
  • 孟兄,如果把onmouseout去掉,那我的效果怎么实现?当鼠标离开层的时候,层要变小。
    2009年5月5日 9:14
  • 或者我怎么样在捕捉鼠标左键点击空白地方,能出触发js,使其缩小?
    2009年5月5日 9:33
  • <table style="width:100%;height:100%;">
        <tr>
            <td align="center" valign="middle">
                    <div></div>
           </td>
        </tr>
    </table>
    这样也可以但FF下不行

    2009年5月5日 12:59
  • function   a()
    {
    switch(event.button)
    {
    case   1   :   document.getElementById('msgtip').style.width='10px';scrollTip();   //break;

    }
    }
    我这样试过,但问题是这样,我在点击层上的连接的时候,会首先把层缩小,然后就没什么反应了,怎样才能点左键后先缩小层,然后执行鼠标左键点击的操作呢??
    2009年5月6日 1:15