none
孟兄，能帮我测试一下？，为什么会显示不出来？，请指点！ RRS feed

 > 

  • 问题

  • Question
    登录进行投票
    0
    登录进行投票

    <%@ 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
    |

答案

  • Question
    登录进行投票
    0
    登录进行投票
    这是一个例子 你可以改成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
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票
    在你的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
    |
    版主

全部回复

  • Question
    登录进行投票
    0
    登录进行投票

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

    2009年4月21日 9:09
    |
  • Question
    登录进行投票
    0
    登录进行投票
    这是一个例子 你可以改成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
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票
    还不太明白你的意思，不过 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
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票
    说白了，就是用来动态定位的，就是计算任何时候你的那个层要设置在什么位置
    孟宪会
    2009年4月22日 4:44
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票
    孟兄，上面的代码，我在第一次打开页面的时候，点系统菜单，我的关闭层显示不出来，在鼠标滚动一下，滚动条移动一下，才能显示出来； 关闭以后，再打开又显示不出来，还是要滚动一下     ，你能帮我测试一下吗？为什么这样？
    2009年4月22日 5:00
    |
  • Question
    登录进行投票
    0
    登录进行投票
    在你的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
    |
    版主