今日做了一个简单的DIV蒙层的demo
具体如下：
1、js代码
function createIframe(){
//mask遮罩层
var newMask=document.createElement("div");
newMask.id="mDiv";
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";
newMask.style.display='none';
var objDiv=document.createElement("DIV");
objDiv.id="div1";
objDiv.name="div1";
objDiv.style.left=(_scrollWidth-480)/2+"px";
objDiv.style.top=(_scrollHeight-200)/2+"px";
objDiv.style.position="absolute";
objDiv.style.zIndex="2"; //加了这个语句让objDiv浮在newMask之上
objDiv.style.display="none"; //让objDiv预先隐藏
objDiv.style.border="solid #0033FF 0px;";
document.body.appendChild(newMask);
document.body.appendChild(objDiv);
var objDrag=document.getElementById("drag");
var drag=false;
var dragX=0;
var dragY=0;
objDrag.attachEvent("onmousedown",startDrag);
function startDrag(){
if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV"){
objDrag.setCapture();
objDrag.style.background="#0000CC";
drag=true;
dragX=event.clientX;
dragY=event.clientY;
}
};
objDrag.attachEvent("onmousemove",Drag);
function Drag(){
if(drag){
var oldwin=objDrag.parentNode;
oldwin.style.left=oldwin.offsetLeft+event.clientX-dragX;
oldwin.style.top=oldwin.offsetTop+event.clientY-dragY;
oldwin.style.left=event.clientX-100;
oldwin.style.top=event.clientY-10;
dragX=event.clientX;
dragY=event.clientY;
}
};
objDrag.attachEvent("onmouseup",stopDrag);
function stopDrag(){
objDrag.style.background="#0033FF";
objDrag.releaseCapture();
drag=false;
};
}
function HideIframe(mDiv,objDiv){
mDiv.style.display='none';
objDiv.style.display = "none"; //隐藏浮动的div
}
function htmlEditor(json){
var objDiv=document.getElementById("div1");
var mDiv=document.getElementById("mDiv");
mDiv.style.display='';
objDiv.innerHTML=json;
objDiv.style.display = ""; //显示浮动的div
}
html代码：
function add(){
$.get("${contextPath}base/citys.do",
{"action":"preAdd"},
function(json){
htmlEditor(json);
}
);}
<body onload="createIframe();"></body>
分享到：
相关推荐
通过js实现的div遮罩层的效果，相当于锁住全屏，只能操作当前的弹出框操作。
Jquery弹出div层窗口以及div屏幕居中, 背景滤镜效果, div拖拽效果 在IE和FireFox测试通过!
纯CSS控制DIV背景透明效果，没有什么好解释的，代码全在文件里面，直接预览或者用记事本打开即可。rgba参数(red,green.,blue,alpha),alpha值0-1 ie滤镜参数#3363370b，前两位为16进制透明度， 比如说值是上面用到的...
<div class="btn btn1">从上滑落</div> <div class="btn btn2">从下划入</div> <div class="btn btn3">中间扩散</div> <div class="btn btn4">中间扩散渐入</div> <div class="btn btn5">从下方平滑进入</div> ...
在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 vue中提供 @touchmove.prevent 方法可以完美解决这个问题 ...在蒙层所在div上加 @touchmove.prevent <div class=”maskBox” @touchmove.p
背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 ... <div class=PopupTime> <van-datetime-picker show-toolbar :title=popupTitle.popupName v-model=
css加html实现的蒙板进度条 技术：js实现div层拖动技术，css样式和js实现蒙板，js实现进度条
今天小编就为大家分享一篇layui: layer.open加载窗体时出现遮罩层的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
这个代码段是演示用CSS控制一个DIV层的透明效果，大家可以看到平铺的背景已经显现出来，实际上比较简单就可以实现，就是用CSS控制一个DIV层，定义样式表时加入filter:alpha(opacity=65);这句代码，里面的值是用来...
而灰蒙的遮蔽层依然显示，用户又无法继续操作了。 根据研究，超级兔子对屏蔽广告的屏蔽原则更为武断，只要是在JavaScript代码中出现类似 “div.style.position=absolute” 的代码，div 就会被隐藏，不仅如此，...
原理：鼠标悬停在整个div上的时候，让所有li标签的背景颜色变为黑色，同时设置所有图片不透明度为50%，这样看起来所有图片上好像蒙上了一层阴影。 然后再给具体鼠标悬停的图片的不透明度设为100%即可实现我们想...
弹出层提示信息，这是移动前端开发中最常见的需求，你可能会...那么抛开这些细细一想，其实弹框就是两个div层，一个浮在底下的蒙层（遮罩层），将所有的元素遮起来，并且最好是半透明。另一个就是弹框主体部分了，一般
4、支持图片型和色块型两种样式的风格 5、支持设置蒙层窗口的颜色； 6、支持不同的风格指向不同的LOGO图片、样式文件三、采集 1、支持设置采集图片的大小限制， 2、支持设置采集超时时间； 3、支持采集列表小...
在开发组件的时候，一定会遇到组件的通信，比如点击一个图标出现弹窗和蒙层，这三个分别是不同的组件。管理他们之间的状态就成了问题。 props双向绑定 通过 sync 双向绑定，属性变化会同步到所有组件，这也是最简单...
5、支持设置蒙层窗口的颜色； 6、支持不同的风格指向不同的LOGO图片、样式文件 七、采集 1、支持设置采集图片的大小限制， 2、支持设置采集超时时间； 3、支持采集列表小图 4、支持2种模式的正文分页采集 5...
5.5 两层或多层次的下拉菜单 5.6 仿IE菜单的按钮。（效果如rongshuxa.com的导航栏目) 5.7 状态栏，title栏的动态效果（例子很多，可以研究一下） 5.8 双击后，网页自动滚屏 6、树型结构。 6.1 asp+SQL版 ...