<script type="text/javascript">
var docEle = function() {
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id) {
var m = "mask";
if (docEle(_id)) document.body.removeChild(docEle(_id));
if (docEle(m)) document.body.removeChild(docEle(m));
//mask遮罩层
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
_scrollWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
_scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
newMask.style.width = _scrollWidth + "px";
newMask.style.height = _scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#33393C";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);
//新弹出层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDivWidth = 400;
newDivHeight = 200;
newDiv.style.width = newDivWidth + "px";
newDiv.style.height = newDivHeight + "px";
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px";
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";
newDiv.innerHTML = "弹出层内容 ";
document.body.appendChild(newDiv);
//弹出层滚动居中
function newDivCenter() {
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px";
}
if (document.all) {
window.attachEvent("onscroll", newDivCenter);
}
else {
window.addEventListener('scroll', newDivCenter, false);
}
//关闭新图层和mask遮罩层
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "关闭";
newA.onclick = function() {
if (document.all) {
window.detachEvent("onscroll", newDivCenter);
}
else {
window.removeEventListener('scroll', newDivCenter, false);
}
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newA);
}
</script>
调用<a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">显示弹层</a>
分享到:
相关推荐
这是一个Winform通用遮罩层,实现了类似WEB上的遮罩层,既可以透明,而且还可以显示动态图片以及文字。
简介:这是一个关于web一键打印小票,标签的dome,已在线上项目中正常使用 功能:1、自动检测lodop是否正常,不正常提示安装lodop控件 2、自动获取电脑上的所有打印机供选择和一键打印 3、可将打印机设置为默认...
EeekSoft[1].Web.PopupWin 页面弹窗
web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开
用于web前端的弹窗插件,包含源码和使用方法。
遮罩层:可以将与遮罩层相链接的图形中的图像遮盖起来。用户可以将多个层组合放在一个遮罩层下,以创建出多样...
主要为大家详细介绍了HTML实现遮罩层的方法,Web页面中使用遮罩层,可防止重复操作,那么如何在HTML中使用遮罩层?感兴趣的小伙伴们可以参考一下
GitHub上人们分享的遮罩层插件也是玲琅满目,不过自己动手做一个的话肯定更复合自己的需求,这里就带大家来看使用jQuery制作Web页面遮罩层插件的实例教程,需要的朋友可以参考下
利用Jquery几行代码就可以实现遮罩层的效果。
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
WEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB页面执行SQLWEB...
layer.js是一款近年来备受青睐的web弹层组件,操作简单,轻松上手。 在与同类弹出层插件的比较中,layer是比叫好用的插件。轻量级的前端插件,且注重性能的提升、易用和实用性。 1、layer.js依赖jquery ...
jQuery css3打开遮罩图片形状过渡动画效果
如何在浏览器窗口上添加一个遮罩层 背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性。 但是,浏览器原生的弹窗函数(alert, confirm, prompt)...
jquery hover图片遮罩层滑动.zip
直播互动页面底部购物车弹窗提示窗以商品左右滑动展示
实现弹出遮罩层的方法有很多种,接下来本文给大家介绍通过jquery操作dom实现弹出页面遮罩层以及web端和移动阻止遮罩层的滑动,对页面弹出遮罩层的相关知识感兴趣的朋友一起看看吧
js弹窗文件