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';document.getElementById('fade').style.display='block'">
                系统菜单</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';document.getElementById('fade').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年4月22日 3:05

答案

  • 这是一个例子 你可以改成asp.net
    <style>
    div.message_frame {display: none; width:50%;}
    #MessageTip {width:50%;}
    #MessageTip_2 {width:50%;}
    #blockUI {display: none; width:100%; height:100%; background-image: url(images/filter.gif); position:absolute; left: 0px; top: 0px; z-index: 50000; -moz-opacity: 0.5;}
    .hidden {display: none;}
    .popup{position: absolute; z-index: 60000;}
    .container{ background:#FFF;padding:2px; position:absolute;border-width:2px;border-color:#EEE #404040 #404040 #EEE;border-style:solid;display:none;top:0;left:0;z-index: 60001;}
    .boxHead {background:url(common/bg5.gif) center center;}
    .boxCloseButton {float:right;cursor:pointer;padding:6px;font-family:Fixedsys}
    .boxTitle {font-weight:bold;padding:6px;cursor:move;}
    </style>
    <script>
    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.left = LoginUI.getViewportWidth() + LoginUI.getViewportScrollX() - $("msgtip").offsetWidth + "px";
    }
    
    function scrollTip()
    {
    	scrollMsgTip()
    }
    
    </script>
    <body>
    <div style='visibility:visible;position:absolute;top:0;left:0;width:300px;height:180px;border:3px double #AAA' id='msgtip'>ddd</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>
    <script>
    scrollTip();
    window.onscroll = scrollTip;
    </script>
    </body>
    

    孟宪会
    2009年4月21日 9:32
    版主
  • 在你的onclick里再加上
    onclick="document.getElementById('msgtip').style.display='block';document.getElementById('fade').style.display='block';scrollTip();">



    <a href="javascript:void(0)" style="color:Red" onclick="document.getElementById('msgtip').style.display='block';document.getElementById('fade').style.display='block';scrollTip(); "> 系统菜单</a>
    孟宪会
    2009年4月22日 9:04
    版主

全部回复

  • 比如,一个确定按钮,在有很多条记录的时候,上下拖动滚动条,按钮能随着移动!用js,dom?试了试,水平有限,没成!~
    高手有没有范例,给小弟我参考,参考?

    2009年4月21日 9:09
  • 这是一个例子 你可以改成asp.net
    <style>
    div.message_frame {display: none; width:50%;}
    #MessageTip {width:50%;}
    #MessageTip_2 {width:50%;}
    #blockUI {display: none; width:100%; height:100%; background-image: url(images/filter.gif); position:absolute; left: 0px; top: 0px; z-index: 50000; -moz-opacity: 0.5;}
    .hidden {display: none;}
    .popup{position: absolute; z-index: 60000;}
    .container{ background:#FFF;padding:2px; position:absolute;border-width:2px;border-color:#EEE #404040 #404040 #EEE;border-style:solid;display:none;top:0;left:0;z-index: 60001;}
    .boxHead {background:url(common/bg5.gif) center center;}
    .boxCloseButton {float:right;cursor:pointer;padding:6px;font-family:Fixedsys}
    .boxTitle {font-weight:bold;padding:6px;cursor:move;}
    </style>
    <script>
    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.left = LoginUI.getViewportWidth() + LoginUI.getViewportScrollX() - $("msgtip").offsetWidth + "px";
    }
    
    function scrollTip()
    {
    	scrollMsgTip()
    }
    
    </script>
    <body>
    <div style='visibility:visible;position:absolute;top:0;left:0;width:300px;height:180px;border:3px double #AAA' id='msgtip'>ddd</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>
    <script>
    scrollTip();
    window.onscroll = scrollTip;
    </script>
    </body>
    

    孟宪会
    2009年4月21日 9:32
    版主
  • 还不太明白你的意思,不过 div 通过设置 css 很方便的就出实现滚动了呀
        <div style="width:200px;height:80px;overflow:scroll">
            <input type="button" value="Button 01" /><br />
            <input type="button" value="Button 02" /><br />
            <input type="button" value="Button 03" /><br />
            <input type="button" value="Button 04" /><br />
            <input type="button" value="Button 05" /><br />
            <input type="button" value="Button 06" /><br />
            <input type="button" value="Button 07" /><br />
        </div>


    知识改变命运,奋斗成就人生!
    2009年4月21日 9:35
    版主
  • 说白了,就是用来动态定位的,就是计算任何时候你的那个层要设置在什么位置
    孟宪会
    2009年4月22日 4:44
    版主
  • 孟兄,上面的代码,我在第一次打开页面的时候,点系统菜单,我的关闭层显示不出来,在鼠标滚动一下,滚动条移动一下,才能显示出来; 关闭以后,再打开又显示不出来,还是要滚动一下     ,你能帮我测试一下吗?为什么这样?
    2009年4月22日 5:00
  • 在你的onclick里再加上
    onclick="document.getElementById('msgtip').style.display='block';document.getElementById('fade').style.display='block';scrollTip();">



    <a href="javascript:void(0)" style="color:Red" onclick="document.getElementById('msgtip').style.display='block';document.getElementById('fade').style.display='block';scrollTip(); "> 系统菜单</a>
    孟宪会
    2009年4月22日 9:04
    版主