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] Nginx服务下统计网站的QPS
    [Go] go等待读取最后一行的数据内容
    [Go] Golang中的面向对象
    [Linux] 常见的并发模型
    [PHP] pmap可以查看进程占用内存的详细情况
    [PHP] 解决php中上传大文件的错误
    [PHP] 循环查看php-fpm的内存占用情况
    [Go] go中的goto语句跳到指定标签
    Java抽象类(Abstract Class)与接口(Interface)区别
    Java访问级别修饰符
  • 原文地址:https://www.cnblogs.com/sallybin/p/3265128.html
Copyright © 2011-2022 走看看