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

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

阅读量：5922 次

发布时间：2019-06-19

本文共 1902 字，大约阅读时间需要 6 分钟。

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>

</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/739862

你可能感兴趣的文章

配置 babel 支持对象扩展运算符、class 直接赋值变量等新特性

用python写一个workflow百度翻译插件

查看>>

动态配置LauncherActivity/根据不同资源文件生成apk

讲case | 小程序+零售+社交=轻松涨业绩？

查看>>

Driven by Tractor high-efficiency Peanut harvester for Farm Keeping Precautions

React中的受控组件和非受控组件学习总结

查看>>