js实现弹出层

最新推荐文章于 2023-09-15 14:36:47 发布

tk_zhang

最新推荐文章于 2023-09-15 14:36:47 发布

阅读量600

点赞数

分类专栏： Javascript 文章标签： JavaScript Firefox CSS HTML ViewUI

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

下面是一个JavaScript代码实现的弹出层效果

<html>  
  <head>  
    <style type="text/css">  
      #tranDiv {   
        position:absolute;   
        left:0px;   
        top:0px;   
      }   
      #tranDivBack {   
        position:absolute;   
        left:0px;   
        top:0px;   
        width:100%;   
        height:100%;   
        background-color:#000000;   
        filter:alpha(Opacity=30);   
        -moz-opacity:0.3;   
        opacity:0.3;   
      }   
      #infoDiv {   
        position:absolute;   
        left:0px;   
        top:0px;   
        width:100%;   
        height:100%;   
        text-align:center;   
      }   
      .pop_box {   
        background:#FFF;   
        padding:10px;   
        border:#666 8px solid;   
      }   
    </style>  
    <script language="javascript">    
      
      function showWindow(width,height){    
        location.href="#";     
        var windowstr= document.getElementById("popLayer").innerHTML;   
        document.getElementById("infoDiv").innerHTML=windowstr;    
        document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px";    
        document.getElementById("infoDiv").style.top=100+"px";    
        document.getElementById("infoDiv").style.zIndex=10001;   
        document.getElementById("infoDiv").style.width=width+"px";    
        document.getElementById("infoDiv").style.height=height+"px";    
        document.getElementById("tranDiv").style.height=document.body.clientHeight+ "px";    
        document.getElementById("tranDiv").style.width=document.body.clientWidth+ "px";    
        document.getElementById("tranDiv").style.display="";    
        document.getElementById("tranDivBack").style.display="";    
        document.getElementById("tranDivBack").style.zIndex=10000;   
        document.getElementById("infoDiv").style.display="";    
      }    
      function closeWindow(){   
        document.getElementById("tranDiv").style.display="none";    
      }
	   function changeVal() {
		var time = document.getElementById("time");
		time.value = "";
		//alert(document.getElementById("link").innerHTML);
	   }
	   function getVal() {
	    var time = document.getElementById("time").value;
		var patrn = /[0-9]/;
		if(!patrn.exec(time)) {
			alert("内容只能为整数，请重新输入！");
			return false;
		}
		if(time <= 0) {
			alert("设置时间应该大于0，请重新输入！");
			return false;
		}
		document.getElementById("link").innerHTML = time;
		//alert(document.getElementById("link").innerHTML);
		document.getElementById("timeVal").value = document.getElementById("link").innerHTML;
		alert(document.getElementById("timeVal").value);
		closeWindow();
	   }
    </script>  
  </head>  
  
  <div id="tranDiv" style="display:none;">  
    <div id="tranDivBack"></div>  
    <div id="infoDiv"></div>  
  </div>  
   
  <div id="popLayer" style="display:none;">  
    <div class="pop_box">  
		时间：<input type="text" value="小时（整数）" id="time" name="time" onClick="return changeVal();" /><br/>
		<input type="button" value="确定" onClick="return getVal();"/>
		<input type="button" value="关闭" onClick="return closeWindow();" />
    </div>  
  </div>  
  
	测试程序：<a id="link" href="javascript:showWindow(250,60);">时间</a> 
	<input type="hidden" id="timeVal" value="0" />
    
</html>

注：document.getElementById("infoDiv").style.width在Firefox中必须为下面样式：

document.getElementById("infoDiv").style.width="180px"

必须加双引号

tk_zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现弹出层

下面是一个JavaScript代码实现的弹出层效果 &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #tranDiv { position:absolute; left:0px; top:0px; ...
复制链接

扫一扫

专栏目录