js 绝对定位居中遮罩效果

现在的位置: 首页 > 综合 > 正文

js 绝对定位居中遮罩效果

2019年05月31日 ⁄ 综合 ⁄ 共 8049字 ⁄ 字号小中大 ⁄ 评论关闭

下面代码，有遮罩及绝对居中2种效果。可以灵活运用。

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>固定模式</title>  
<script type="text/javascript" src="jquery.min.js"></script>  
<style type="text/css">  
/*弹出层的STYLE*/   
html,body {height:100%; margin:0px; font-size:12px;}   
.mydiv {   
    background-color: #ff6;   
    border: 1px solid #f90;   
    text-align: center;   
    line-height: 40px;   
    font-size: 12px;   
    font-weight: bold;   
    z-index:99;   
    width: 300px;   
    height: 120px;   
    position:absolute;/*IE6*/   
}   
   
.bg {   
    background-color: #ccc;   
    width: 100%;   
    height: 100%;   
    left:0;   
    top:0;/*FF IE7*/   
    filter:alpha(opacity=50);/*IE*/   
    opacity:0.5;/*FF*/   
    z-index:1;   
    position:fixed!important;/*FF IE7*/   
    position:absolute;/*IE6*/   
    _top:       expression(eval(document.compatMode &&   
                document.compatMode=='CSS1Compat') ?   
                documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/   
                document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/   
}   
/*The END*/   
</style>  
<script type="text/javascript">  
    function showDiv(){   
        document.getElementById('popDiv').style.display='block';   
        document.getElementById('bg').style.display='block';   
    }   

    function closeDiv(){   
        document.getElementById('popDiv').style.display='none';   
        document.getElementById('bg').style.display='none';   
    }   
    
$(document).ready(function() {
     showDiv();
    moveDiv("popDiv");
});


function moveDiv(boxId){   //js函数 定位
  $("#" + boxId).css({   // 定位浮层
  top: (($(window).height() - $("#" + boxId).height())/2+document.documentElement.scrollTop),
  left: ($(window).width() - $("#" + boxId).width())/2
  });
  $("#" + boxId).css("display","block"); // 显示浮层
}
</script>  
</head>  
<body >  
  
      
    <div id="popDiv" class="mydiv" >恭喜你！<br/>成功一个。。。。。。。。。<br/>  
    <a href="#two"  id="dddddd" onclick="closeDiv()"  >关闭窗口</a></div>  
 
    <div id="bg" class="bg" style="display:none;"></div>  
      
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
  
  
</body>  
</html>

position: fixed; 用这个定位，是随页面滚动

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>更随滚动模式</title>  
<script type="text/javascript" src="jquery.min.js"></script>  
<style type="text/css">  
/*弹出层的STYLE*/   
html,body {height:100%; margin:0px; font-size:12px;}   
.mydiv {   
    background-color: #ff6;   
    border: 1px solid #f90;   
    text-align: center;   
    line-height: 40px;   
    font-size: 12px;   
    font-weight: bold;   
    z-index:99;   
    width: 300px;   
    height: 120px;   
    position:fixed;/*IE6*/   
}   
   
.bg {   
    background-color: #ccc;   
    width: 100%;   
    height: 100%;   
    left:0;   
    top:0;/*FF IE7*/   
    filter:alpha(opacity=50);/*IE*/   
    opacity:0.5;/*FF*/   
    z-index:1;   
    position:fixed!important;/*FF IE7*/   
    position:absolute;/*IE6*/   
    _top:       expression(eval(document.compatMode &&   
                document.compatMode=='CSS1Compat') ?   
                documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/   
                document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/   
}   
/*The END*/   
</style>  
<script type="text/javascript">  
    function showDiv(){   
        document.getElementById('popDiv').style.display='block';   
        document.getElementById('bg').style.display='block';   
    }   

    function closeDiv(){   
        document.getElementById('popDiv').style.display='none';   
		document.getElementById('bg').style.display='none';   
    }   
	
$(document).ready(function() {
 	showDiv();
	moveDiv("popDiv");
});


function moveDiv(boxId){   //js函数 定位
  $("#" + boxId).css({   // 定位浮层
  top: (($(window).height() - $("#" + boxId).height())/2+document.documentElement.scrollTop),
  left: ($(window).width() - $("#" + boxId).width())/2
  });
  $("#" + boxId).css("display","block"); // 显示浮层
}
</script>  
</head>  
<body >  
  
      
    <div id="popDiv" class="mydiv" >恭喜你！<br/>成功一个。。。。。。。。。<br/>  
    <a href="#two"  id="dddddd" onclick="closeDiv()"  >关闭窗口</a></div>  
 
    <div id="bg" class="bg" style="display:none;"></div>  
      
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
  
  
</body>  
</html>

【上篇】div 触发失去焦点事件
【下篇】html5 一个很好用的html5图表html

作者: pingziqunzi

该日志由 pingziqunzi 于5年前发表在综合分类下，最后更新于 2019年05月31日.
转载请注明: js 绝对定位居中遮罩效果 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

js 绝对定位居中遮罩效果

作者: pingziqunzi

书签

最新文章New

本站推荐

返回首页