<style>
#main {width:250px;heigth:300px;position:absolute;z-index:10;border:1px solid #d6d6d6;display:none;}
#main .T {width:250px;height:auto;background:green;}
#main .T .T_1 {float:left;width:232px;line-height:20px;cursor:move;color:#FFF;font-weight:bold;font-family:verdana;font-size:12px;}
#main .T .T_2 {float:left;width:18px;line-height:20px;background:blue;color:#FFF;font-weight:bold;font-family:verdana;font-size:9pt;text-align:center;cursor:pointer;}
#main .content {width:250px;height:100px;background:#fff;}
</style>
<script>
function $(id){return document.getElementById(id);}
function abc(){
$("main").style.display="inline";
$("main").style.top = (document.body.clientHeight - $("main").offsetHeight)/2+"px";
$("main").style.left = (document.body.clientWidth - $("main").offsetWidth)/2+"px";
$("main").onmousedown=Function("Drag(this)"); //拖动层
//背景层
var shield=document.createElement("div");
var W=document.body.clientWidth;
var H=document.body.clientHeight;
shield.id="shield";
shield.style.cssText="position:absolute;z-index:1;width:"+W+"px;height:"+H+"px;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;";
document.body.appendChild(shield);
}
function hidden(){
if($("main")){$("main").style.display="none";}
if($("shield")){document.body.removeChild($("shield"));}
}
function Drag(str){
var e=window.event || arguments.callee.caller.arguments[0];
var deltaX=e.clientX-parseInt(str.offsetLeft);
var deltaY=e.clientY-parseInt(str.offsetTop);
var deltaH=document.body.clientHeight;
var deltaW=document.body.clientWidth;
var drag=true;
str.onmousemove=function(ev){
ev=ev?ev:window.event;
if(drag){
var Y=ev.clientY-deltaY;
var X=ev.clientX-deltaX;
var H=deltaH-str.offsetHeight;
var W=deltaW-str.offsetWidth;
if(Y>0 || X>0){
if(Y>=H){str.style.top=H+"px";}else{str.style.top=Y+"px";}
if(X>=W){str.style.left=W+"px";}else{str.style.left=X+"px";}
}
if(Y<=0){str.style.top=0;}
if(X<=0){str.style.left=0;}
str.setCapture();
}}
str.onmouseup=function(){drag=false;str.releaseCapture();}
}
</script>
<button onclick="abc()">弹层</button>
<div id="main">
<div class="T"><div class="T_1" onmousedown="Drag(this.parentNode.parentNode)">鼠标放这里拖动</div><div class="T_2" onclick="hidden()">Χ</div></div>
<div class="content"></div>
</div>
分享到:
相关推荐
弹出层兼容所有浏览器,用jquery编写,可兼容所有游览器
点击弹出浮动层 弹出遮罩层 点击弹出浮动层 弹出遮罩层
JavaScript经典案例,实用素材。。。。。。。。。。。。。
利用div+css制作弹出层并遮罩层,主用用了两个div,一个div用于弹出框,另一个则遮罩整个页面
非常好用的jquery弹出框,也可做弹出层,遮盖层
NULL 博文链接:https://tangdonnaui.iteye.com/blog/548289
本人制作的jquery弹出层拖拽插件JDragUI 功能: 1、弹出浮动层(带或不带遮盖,及是否挡住整个页面只显示层) 2、支持层拖拽(拖拽时可增加虚影效果,同时完善用户体验,层只会在浏览器范围你拖拽) (压缩包中有...
这是一款基于jQuery+HTML5实现的手机移动端模态窗口弹出层代码,手机遮罩弹出菜单代码。
JS+CSS遮盖层,完全支持ie等主流浏览器,并解决在ie6下无法遮盖窗口级控件问题。
弹出层遮罩层效果(包括居中、不随滚动条滚动)
一个弹出层的示例,用于在页面中弹出层,下拉列表一样会被遮盖
实用div实现的弹出层菜单,带遮盖层,简单实用
点击弹窗按钮则弹出信息,点击右上角关闭按钮则关闭弹出层,弹出后遮盖层部分不可点击,无上拉下滑操作。用作于提示,展示列表,添加内容等操作。
jQuery popup javascript 弹出窗口 可遮盖IE6的select 点击其它地方自动隐藏 兼容IE,FF等浏览器
基于vue开发的popup 的mixins 用于管理弹出框的遮盖层
这个组件目前最新版本是:V2.1 可以弹出询问层,提示层,iframe层,iframe窗,加载层,tips层,tap层,相册层等等. 特性:弹出的层可以鼠标拖动,拖动时其层自动透明,弹出的还有透明遮盖层.
弹出层 weebox。可以实现遮盖底层页面,能够遮挡下拉控件。里面有些功能经过稍稍的改版,为了应付需要。
WPF弹出半透明遮罩,比较简单,适合初学者
jquery的遮盖层代码,简单易用,方便使用,哈哈 规范化
久不出技术类文章,我都忘...主要代码如下: 代码如下://弹出层剧中 function popup(popupName) { var _scrollHeight = $(document).scrollTop(); //获取当前窗口距离页面顶部高度 _windowHeight = $(window).height();