JS -------------------设置弹出框位置屏幕的中间

最新推荐文章于 2024-05-02 17:59:36 发布

weixin_33921089

最新推荐文章于 2024-05-02 17:59:36 发布

阅读量3.1k

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2870118/blog/739860

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.创建背景div

/*背景div的css*/
.black_overlar{
   display:none;
   position:absolute;
   top:0%;
   left:0%;
   width:100%;
   height:100%;
   background:#999;
   z-index:1001;
   -moz-opacity: 0.8;/*透明度*/
   opacity:.80;
   filter: alpha(opacity=88);/*IE浏览器实现不透明度为80%*/
   }

2.创建弹窗div

/*显示div的css*/
.white_content{
   display:none;
   position:absolute;
   border:5px solid #e4e6eb;
   boder-radius:4px;
   z-index:1002;
   }

3.设置弹窗的位置

/*内嵌iframe的css*/
.ifr{
   position: relative;
   z-index:1003;
   overflow:auto;
   border-width:0px;
   }

点击按钮弹出框：

HTML;
<body>
<div>
<input type="button" value="弹窗" οnclick="toAlert()"/>
</div>
<div id="backDiv" class="black_overlar"></div>
<div id="floatDiv" class="white_content"></div>
</body>

JS:

function toAlert(){
   var inHtml = "<iframe class='ifr' src='xx.html' style='width:600px; height:600px'></iframe>"
   var myDiv = document.getElementById("floatDiv");
   myDiv.innerHTML = inHtml;
   FloatCenter("backDiv","floatDiv");//设置背景div和浮动div的位置
}

//设置位置
function FloatCenter(fadeId, floatId){
//透明玻璃：把全屏和滚动条到底的所有区域都都设置上背景
if(fadeId != null){

      指页面的总高度，当前一屏显示高度再加上纵向滚动条滚动到底的高度
      document.getElementById(floatId).style.height = document.body.scrollHeight + "px";
      document.getElementById(fadeId).style.display = "block";
}
//浮动窗口：根据屏幕高度和屏幕宽度和弹出框的实际高度和宽度来确定浮动窗口的位置【居中】
document.getElementById(floatId).style.display = "block";

//网页内容实际高度
var myHeight = document.getElementById(floatId).offsetHeight;

//网页内容实际宽度
var myWidth = document.getElementById(floatId).offsetWidth;
document.getElementById(floatId).style.display = "none";
$("#" + floatId).show(200);

//设置位置
document.getElementById(floatId).style.top = (document.documentElement.clientHeight - myHeight)/2 + getScrollTop() + "px";
document.getElementById(floatId).style.left = (document.documentElement.clientWidth - myWidth)/2 + "px";
}

//适应IE获取浏览器滚动条高度
function getScrollTop(){
var myScroll = document.documentElement.scrollTop;
if(myScroll == 0){
myScroll = document.body.scrollTop;
}
return myScroll;
}

转载于:https://my.oschina.net/u/2870118/blog/739860