点击弹出居中的遮罩层,背景变暗

点击弹出层特效代码,网页上已经有很多类似的代码了,使用挺广泛的,代码先判断浏览器的版本,ie6创建的div样式和非ie6创建的div样式在解析时有点区别,为了兼容性考虑,才加了判断,虽然实现的有点粗糙,不过从实现的方法来说,容易理解,便于修改完善。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>点击弹出居中的遮罩层,背景变暗丨秦皇岛轻质隔墙板</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <style type="text/css">
    .hidden{display:none;}
    #smallLay{width:498px; height:100px;padding:4px 10px 10px;background-color:#FFFFFF;border:1px solid #05549d;color:#333333;line-height:24px;text-align:left;-webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:3px 3px 6px #555;}
    </style>
    <script type="text/javascript">
    function showid(idname){
    var isIE = (document.all) ? true : false;
    var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
    var newbox=document.getElementById(idname);
    newbox.style.zIndex="9999";
    newbox.style.display="block"
    newbox.style.position = !isIE6 ? "fixed" : "absolute";
    newbox.style.top =newbox.style.left = "50%";
    newbox.style.marginTop = - newbox.offsetHeight / 2 + "px";
    newbox.style.marginLeft = - newbox.offsetWidth / 2 + "px";
    var layer=document.createElement("div");
    layer.id="layer";
    layer.style.width=layer.style.height="100%";
    layer.style.position= !isIE6 ? "fixed" : "absolute";
    layer.style.top=layer.style.left=0;
    layer.style.backgroundColor="#000";
    layer.style.zIndex="9998";
    layer.style.opacity="0.6";
    document.body.appendChild(layer);
    var sel=document.getElementsByTagName("select");
    for(var i=0;i<sel.length;i++){
    sel[i].style.visibility="hidden";
    }
    function layer_iestyle(){
    layer.style.width=Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)
    + "px";
    layer.style.height= Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +
    "px";
    }
    function newbox_iestyle(){
    newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";
    newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";
    }
    if(isIE){layer.style.filter ="alpha(opacity=60)";}
    if(isIE6){
    layer_iestyle()
    newbox_iestyle();
    window.attachEvent("onscroll",function(){
    newbox_iestyle();
    })
    window.attachEvent("onresize",layer_iestyle)
    }
    layer.onclick=function(){newbox.style.display="none";layer.style.display="none";for(var i=0;i<sel.length;i++){
    sel[i].style.visibility="visible";
    }}
    }
    </script>
    </head>
    <body>
    <input type="button" id="showbtn" name="showbtn" value="点我弹出层" onclick="showid(‘smallLay‘);">
    <div id="smallLay" style="display:none;"><p align="center">本特效由 <a href="http://tssljc.com/" target="_blank">秦皇岛轻质隔墙板</a>丨tssljc.com 收集于互联网,只为兴趣与学习交流,不作商业用途。</p>
    </div>
    </body>
    </html>
时间: 2024-11-05 20:46:03

点击弹出居中的遮罩层,背景变暗的相关文章

点击弹出居中带有透明遮罩层窗口

点击弹出居中带有透明遮罩层窗口:本章节介绍一下如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,此效果在当下比较流行,当然还有更为复杂的实现方式,当然效果也更为绚丽,下面介绍的代码能够简单实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="htt

android开发步步为营之51:弹出窗及遮罩层的几种实现方式

需要做一个弹出窗或者遮罩层,我们一般有以下几种思路. 1.AlertDialog对话框 2.PopupWindow弹出窗 3.WindowManager动态添加View到当前页面 4.打开另外一个Activity 下面分别给出这几种方法的实现栗子. 一.AlertDialog 适合需要用户做出选择,或者确认的弹出小窗 AlertDialog.Builder dialog = new AlertDialog.Builder(TestActivity.this); //自定义 //dialog.se

element-ui 弹出框在遮罩层下面

title: element-ui 弹出框在遮罩层下面 date: 2020-03-18 11:37:45 tags: elementUI 给 <el-dialog></el-dialog>添加:modal-append-to-body="false"属性 <el-dialog title="提示" :visible.sync="isDialogShow" :modal-append-to-body="fa

微信小程序弹出和隐藏遮罩层动画以及五星评分

参考源码: http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article/details/56276180 https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html train.wxml <view class='train_con'> <view class='head'>

easyui弹出加载遮罩层(转)

//弹出加载层 function load() { $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body"); $("<div class=\"datagrid-m

简单的jquery点击弹出背景变暗遮罩效果

工作中自己写了一个简单的jquery点击弹出背景变暗遮罩效果,非常好用......只把关键代码贴出来.并实现了点击空白处隐藏弹出层效果. js代码如下: <script type="text/javascript">  $(document).ready(function(){   $(".tkyy").click(function(event){      event.stopPropagation(); //停止事件冒泡    $(".ma

jQuery点击弹出层,弹出模态框,点击模态框消失

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>

点击弹出层以外的区域隐藏弹出层

我们店显示弹出层后,想让其消失,但又不想添加“X”来关闭,可以使用点击弹出层以外的区域来让该层消失的办法.下面如代码: $(".btn3").click(function(e){ e.stopPropagation();//阻止事件向上冒泡 $(".con-share").removeClass("hide"); }) //显示弹出层 $(document).click(function(e){ if(!$(".con-share&qu

工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏

function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display=="none") {//下面就简单了 不一一赘述了 divs.style.display="block" }else{ divs.style.display="none" } } js原生代码实现 鼠标点击 弹出 隐藏 div隐藏