zoukankan      html  css  js  c++  java
  • javascript --- 网页中间弹出框的示例代码

    网页中间弹出框思路:                                                                                                        

    1.按下弹出按钮后,将弹出框div设置为显示

    2.弹出框弹出后再将弹出框下一层的div设置为显示,可启用滤镜效果调节该div透明度,该div能阻止用户操作弹出框以外的内容。

    示例代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <script type="text/javascript">
    //显示弹出框
    function showdiv(){
    	document.getElementById("boxBG").style.display="block";			//将弹出框设为可见
    	document.getElementById("box").style.display="block";			//将隔挡层设为可见,阻止网页中操作
    	document.getElementsByTagName('body')[0].style.overflow="hidden";//阻止滚动条滚动
    }
    
    //去除弹出框
    function closediv(){
    	document.getElementById("box").style.display="none";
    	document.getElementById("boxBG").style.display="none";
    	document.getElementsByTagName('body')[0].style.overflow="scroll";
    }
    
    //当页面加载时,浏览器窗口变动时,滚动条滚动时启用该函数,主要功能是得到弹出框的位置
    function load(){
    	//得到网页可见高度和宽度
    	var boxBG_height=parseInt(document.documentElement.clientHeight);   
    	var boxBG_width=parseInt(document.documentElement.clientWidth);
    	//得到隔挡层的高度和宽度
    	document.getElementById("boxBG").style.height=boxBG_height+'px';
    	document.getElementById("boxBG").style.width=boxBG_width+'px';
    	//得到弹出框的高度和宽度
    	var p1=document.getElementById("box").style.width.indexOf('p');
    	var confirm_width=parseInt(document.getElementById('box').style.width.substr(0,p1));
    	var p2=document.getElementById("box").style.height.indexOf('p');
    	var confirm_height=parseInt(document.getElementById('box').style.height.substr(0,p2));
    	
    	//隔挡层的top值=滚动条滚动的高度
    	document.getElementById("boxBG").style.top=document.body.scrollTop+'px';
    	//弹出框的left属性值=(网页可见宽度-弹出框宽度)/2
    	document.getElementById("box").style.left=(boxBG_width-confirm_width)/2+'px';
    	//弹出框的height属性值=(网页可见高度-弹出框高度)/2+滚动条滚动的高度
    	document.getElementById("box").style.top=(boxBG_height-confirm_height)/2+parseInt(document.body.scrollTop)+'px';
    }
    
    window.onscroll=load;    //拉动滚动条则调用Load函数
    </script>
    </head>
    
    <body onload="load();" onresize="load();" style="height:1000px;">
    
    <div style="margin-top:500px;">
    <span  onclick="showdiv()" style="cursor:pointer;">购买</span>
    <a href="">取消</a>
    </div>
    
    <!--这里是一个隔挡div,主要是弹出框后,不允许背景层的任何操作-->
    <div id="boxBG" style="position:absolute; z-index:1; filter:alpha(opacity=10);opacity:0.1; background-color:#0066CC; left:0px; display:none;"></div>
    
    <!--这是弹出框,默认不可见-->
    <div id="box" style="position:absolute;500px; height:300px; overflow:hidden;  background-color:#FFFF99; z-index:2; display:none;">
    
    <div class='top' style="background-color:gray;text-align:right;">
    <a onclick="closediv()" style="cursor:pointer;">关闭</a>
    </div>
    
    <div class="main">
    用户名:<input type="text" /><br/>
    密 码:<input type="password"/><br/>
    <button type="button" onclick="closediv()">登录</button>
    </div>
    
    </div>
    
    </body>
    </html>
    

      

  • 相关阅读:
    #Linux 系统管理命令 | top命令
    Linux 操作文件目录
    背包问题(1)背包的引入
    硬币找零问题
    输入一个正数 n,输出所有和为 n 连续正数序列。 java实现
    张小二求职记之 单例模式(三)之决战多线程
    张小二求职 之单例模式(一)
    张小二求职记之 单例模式(二)
    待修改 nyoj 412 又是一个遗留问题
    nyoj 904 hashmap
  • 原文地址:https://www.cnblogs.com/sallybin/p/3265128.html
Copyright © 2011-2022 走看看