Js弹出层
使用方法：
1，首先导入css和js
<script type="text/javascript" src="js/PopUpManager-compressed.js" ></script>
<link href="css/PopUpLayer.css" type="text/css" rel="stylesheet"/>
2.
Alert.show(el,modal,dragTitle);
Alert.close(el);
Alert.showIframe(url,width,height,modal);
Alert.closeIframe();
如果在iframe页关闭弹出层，
则是 parent.Alert.close(el);
parent.Alert.closeIframe();
PopUpManager.js源码如下：
if(typeof EventFactory == "undefinded"){
alert('aa');
}
var getClient = function(e)
{
if (e) {
w = e.clientWidth;
h = e.clientHeight;
} else {
w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
}
return {w:w,h:h};
};
function removeElementById(id){
var el = document.getElementById(id);
if(el && el.parentNode) el.parentNode.removeChild(el);
}
var isIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;
var isIE6 = navigator.userAgent.toLowerCase().indexOf("msie 6.0") != -1;
var isMacXFF = navigator.userAgent.toLowerCase().indexOf('mac')!= -1 && navigator.userAgent.toLowerCase().indexOf('firefox')!=-1;
var Alert = {
"instance" : null,
"show" : function(el,modal,dragTitle){
var len = arguments.length;
if(len==0 || !el){
alert('温馨提示：待弹出对象不存在!\n请确认您要弹出的对象在dom中');
return;
}
if(!this.instance)
{
this.instance = new PopUpManager();
}
if(typeof el =="string")
{
el = document.getElementById(el);
}
if(typeof dragTitle == "string")
{
dragTitle = document.getElementById(dragTitle);
}
el.style.display='block';
this.instance.addPopUp(el,modal,dragTitle);
},
"close": function(el){
if(this.instance){
try{
if(el){
el.style.display="none";
}else{
this.instance.removePopUp();
}
}catch(e){
this.instance.currentWin.style.display="none";
}
}
},
"showIframe": function(url,width,height,modal){
if(!this.instance)
{
this.instance = new PopUpManager();
}
this.instance.showIframe(url,width,height,modal);
},
"closeIframe": function(){
if(this.instance){
this.instance.removeIframe();
}
}
}
var Drag={
"maxDepth":10,
"currentWin":null,
"swapList":[],
"obj":null,
"init":function(handle, dragBody,swapEnable){
//自动交换深度
if(swapEnable != false){
this.autoSwap(dragBody);
}
handle.onmousedown=Drag.start;
handle.root = dragBody;
handle.root.onDragStart=new Function();
handle.root.onDragEnd=new Function();
handle.root.onDrag=new Function();
},
"start":function(e){
var handle=Drag.obj=this;
Drag.fixPos(handle.root);
e=Drag.fixEvent(e);
var top=parseInt(handle.root.style.top);
var left=parseInt(handle.root.style.left);
handle.root.onDragStart(left,top,e.pageX,e.pageY);
handle.lastMouseX=e.pageX;
handle.lastMouseY=e.pageY;
document.onmousemove=Drag.drag;
document.onmouseup=Drag.end;
return false;
},
"drag":function(e){
e=Drag.fixEvent(e);
var handle=Drag.obj;
var mouseY=e.pageY;
var mouseX=e.pageX;
var top=parseInt(handle.root.style.top);
var left=parseInt(handle.root.style.left);
var currentLeft,currentTop;
currentLeft=left+mouseX-handle.lastMouseX;
currentTop=top+(mouseY-handle.lastMouseY);
handle.root.style.left=currentLeft +"px";
handle.root.style.top=currentTop+"px";
handle.lastMouseX=mouseX;
handle.lastMouseY=mouseY;
handle.root.onDrag(currentLeft,currentTop,e.pageX,e.pageY);//调用外面对应的函数
return false;
},
"end":function(){
document.onmousemove=null;
document.onmouseup=null;
Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style.left),parseInt(Drag.obj.root.style.top));
Drag.obj=null;
},
"fixEvent":function(e){
if(typeof e=="undefined")e=window.event;
if(typeof e.layerX=="undefined")e.layerX=e.offsetX;
if(typeof e.layerY=="undefined")e.layerY=e.offsetY;
if(typeof e.pageX == "undefined")e.pageX = e.clientX + document.body.scrollLeft - document.body.clientLeft;
if(typeof e.pageY == "undefined")e.pageY = e.clientY + document.body.scrollTop - document.body.clientTop;
return e;
},
"fixPos":function(e){
var top,left;
if(isIE){
top = e.currentStyle.top;
left = e.currentStyle.left;
}else{//此处有小BUG 未计算伪类
top = window.getComputedStyle(e,null).top;
left = window.getComputedStyle(e,null).left;
}
if(left.indexOf("%") != -1) left = getClient().w * parseInt(left) / 100 ;
if(top.indexOf("%") != -1) top = getClient().h * parseInt(top) / 100 ;
top = parseInt(top) || 0;
left = parseInt(left) || 0;
e.style.left=left+"px";
e.style.top=top+"px";
},
"autoSwap":function(dragBody){
var zIndex;
if(isIE){
zIndex = dragBody.currentStyle.zIndex;
}else{
zIndex = window.getComputedStyle(dragBody,null).zIndex;
}
if(zIndex>this.maxDepth){
this.maxDepth = zIndex;
}
if(this.swapList.indexOf(dragBody) == -1){
this.swapList.push(dragBody);
Drag.addEventListener(dragBody,"mousedown",
function(){
if(dragBody!=Drag.currentWin && Drag.currentWin){
Drag.currentWin.style.zIndex = Drag.maxDepth-1;
dragBody.style.zIndex=Drag.maxDepth;
Drag.currentWin = dragBody;
}else{
Drag.currentWin = dragBody;
}
});
}
}
};
Drag.addEventListener = function(target, eventName, handler, argsObject)
{
var eventHandler = handler;
if(argsObject)
{
eventHander = function(e)
{
handler.call(argsObject, e);
}
}
if(window.attachEvent)
{
target.attachEvent("on" + eventName, eventHandler );
}else{
target.addEventListener(eventName, eventHandler, false);
}
}
var PopUpManager = function (){
this.overlayId = "TB_overlay";
this.containerId = "TB_window";
this.iframeId = "TB_iframe";
this.IE6OriginalStyle =null;
if(isMacXFF){
this.overlayClass = "TB_overlayMacFFBGHack";
}else{
this.overlayClass = "TB_overlayBG";
}
};
PopUpManager.prototype.addPopUp = function(el,modal,dragTitle)
{
var instance = this;
if(!modal){
this.overlayDiv = this.addLayover(); //添加遮罩层
this.overlayDiv.onclick = function(){instance.removePopUp();}
this.addContent(el);
if(dragTitle)
{
var container = document.getElementById(this.containerId);
Drag.init(dragTitle,container,false);
}
}else{
if(this.currentWin && this.currentWin != el){
this.currentWin.style.zIndex = Drag.maxDepth-1;
el.style.zIndex=Drag.maxDepth;
}
this.currentWin = el;
this.centerPopUp(el);
if(dragTitle)
{
Drag.init(dragTitle,el);//可拖拽
}
}
}
PopUpManager.prototype.showIframe = function(url,width,height,modal)
{
width = width || 600;
height = height || 400;
var instance = this;
this.overlayDiv = this.addLayover(); //添加遮罩层
if(!modal){
this.overlayDiv.onclick = function(){instance.removeIframe();}
}
this.iframe = this.addIframe();
this.iframe.src = url;
this.iframe.style.width = width+"px";
this.iframe.style.height = height+"px";
this.centerPopUp(this.iframe);
}
PopUpManager.prototype.centerPopUp = function(el)
{
el.style.display = "block";
el.style.top = "50%";
el.style.left = "50%";
if(isIE6){
el.style.position = "absolute";
el.style.marginTop = parseInt(document.documentElement.scrollTop-el.offsetHeight/2,10) + 'px';
}else{
el.style.position = "fixed";
el.style.marginTop = '-'+ parseInt(el.offsetHeight/2,10) + 'px';
}
el.style.marginLeft = "-" + parseInt(el.offsetWidth/2,10) + "px";
}
//IE6 private <iframe id="TB_HideSelect"></iframe>
//MacFF <div id="TB_overlay" class="TB_overlayMacFFBGHack"></div>
//other <div id="TB_overlay" class="TB_overlayBG"></div>
PopUpManager.prototype.addLayover = function(){
var overlay = document.getElementById(this.overlayId);
if(!overlay){
if(isIE6){
this.addIE6TemStyle();
var iframe = document.createElement("iframe");
iframe.id = "TB_HideSelect";
iframe.frameBorder=0;
document.body.appendChild(iframe);
}
overlay = document.createElement("div");
overlay.id = this.overlayId;
overlay.className = this.overlayClass;
document.body.appendChild(overlay);
}
var zIndex;
if(isIE){
zIndex = isIE && overlay.currentStyle.zIndex;
}else{
zIndex = window.getComputedStyle(overlay,null).zIndex;
}
if(zIndex<Drag.maxDepth)
{
}
overlay.style.display = "block";
return overlay;
}
//<div id="TB_window"></div>
PopUpManager.prototype.addContent = function(el){
var container = document.getElementById(this.containerId);
if(!container){
container = document.createElement("div");
container.id = this.containerId;
document.body.appendChild(container);
}
container.appendChild(el);
this.centerPopUp(container);
document.getElementById(this.containerId).style.display = "block";
}
PopUpManager.prototype.addIframe = function()
{
var iframe = document.getElementById(this.iframeId);
if(!iframe)
{
iframe = document.createElement("iframe");
iframe.id = this.iframeId;
iframe.frameBorder = 0;
document.body.appendChild(iframe);
}
return iframe;
}
PopUpManager.prototype.removePopUp = function()
{
this.removeOverlay();
this.removeContent();
}
PopUpManager.prototype.removeIframe = function(){
this.removeOverlay();
removeElementById(this.iframeId);
}
PopUpManager.prototype.removeOverlay = function()
{
removeElementById(this.overlayId);
if(isIE6){
this.removeIE6TemStyle();
removeElementById("TB_HideSelect");
}
}
PopUpManager.prototype.removeContent = function()
{
document.getElementById(this.containerId).style.display = "none";
//document.body.removeChild(this.container);
}
PopUpManager.prototype.addIE6TemStyle = function()
{
var htmlEl = document.getElementsByTagName("HTML")[0];
var bodyEl = document.body;
this.IE6OriginalStyle = {htmlHeight: htmlEl.currentStyle.height,
htmlWidth: htmlEl.currentStyle.width,
htmlOverflow: htmlEl.currentStyle.overflow,
bodyHeight: bodyEl.currentStyle.height,
bodyWidth: bodyEl.currentStyle.width};
htmlEl.style.width = "100%";
htmlEl.style.height = "100%";
htmlEl.style.overflow = "hidden";
bodyEl.style.width = "100%";
bodyEl.style.height = "100%";/**/
}
PopUpManager.prototype.removeIE6TemStyle = function()
{
if(this.IE6OriginalStyle)
{
var htmlEl = document.getElementsByTagName("HTML")[0];
var bodyEl = document.body;
htmlEl.style.width = this.IE6OriginalStyle.htmlWidth;
htmlEl.style.height = this.IE6OriginalStyle.htmlHeight;
htmlEl.style.overflow = this.IE6OriginalStyle.htmlOverflow;
bodyEl.style.width = this.IE6OriginalStyle.bodyWidth;
bodyEl.style.height = this.IE6OriginalStyle.bodyHeight;
}
}
分享到：
相关推荐
本文将详细解析"支持弹出多个窗口的jQuery弹窗插件"，即popupWindow.js，它是jQuery插件家族中的一个重要成员，主要用于创建具有多种功能的弹出窗口。 首先，popupWindow.js的核心特性是它支持弹出多个窗口，这意味...
4. **窗口内部图片切换效果**：在弹出的窗口内，用户可以轻松切换多张图片。这通常通过添加导航按钮（如“上一张”、“下一张”）或者滑动效果来实现。可以使用JavaScript数组存储所有要切换的图片源，然后根据用户...
总结来说，"js弹出层可拖动兼容各大浏览器"涉及了JavaScript事件处理、DOM操作、CSS样式兼容、响应式设计以及用户交互优化等多个方面。通过掌握这些技术，开发者能够创建出一个在各种浏览器环境下都能流畅使用的可...
本资源“支持弹出多个窗口的jQuery弹窗插件.zip”是专为网页开发者设计的，旨在帮助他们实现多窗口弹出功能，这在创建交互式网页时非常有用，比如用于展示产品详情、用户提示或登录对话框。 首先，让我们详细了解...
Js弹出层库则是专门为此目的设计的JavaScript库，简化了弹出层的创建和管理过程。在这个场景中，我们关注的是名为"Dialog"的压缩包文件，很可能包含了一个对话框实现的库或者相关的代码示例。 弹出层通常分为几种...
vue3 拖拽放大缩小弹窗demo
在这个"js弹出框-弹出层-拖拽-兼容"的插件中，开发者通过纯JavaScript实现了弹出层的创建、拖拽功能的添加，并优化了代码以适应多种浏览器环境。这个插件的价值在于它不需要依赖jQuery或其他大型库，降低了页面加载...
在JavaScript（JS）编程中，弹出层是一种常见的交互设计元素，用于显示额外的信息或功能，而不会离开当前页面。这种技术广泛应用于网页中的警告、确认对话框、模态窗口和自定义信息提示。"js弹出层特效点击按钮弹出...
"zDrag.js"可能包含拖放功能的实现，允许用户通过鼠标拖动来调整弹出层的位置，增加用户的操作自由度。 "bigform.html"和"test.html"可能是用于测试不同场景下弹出层功能的页面，可能包含了复杂表单或其他交互元素...
又一个简洁实用的jquery弹出框插件，可实现弹出提示框、弹出引用其他URL框、弹出确认框，可以设置在屏幕中显示的位置（正中间）、设置弹窗事件、添加窗口resize时调整对话框位置，而且还可以拖动层。当弹出浮动...
本案例中提到的插件可能是通过创建一个可浮动的div元素来模拟弹出层效果，并通过jQuery事件监听和DOM操作实现弹出、隐藏以及拖动功能。 拖动特效的实现主要依赖于jQuery的`mousedown`、`mousemove`和`mouseup`事件...
这个组件允许用户自定义和拖动弹出窗口，提供了一种非模态（非阻塞）的对话体验，使得用户可以在不关闭当前页面的情况下与弹出层进行交互。这种设计在网页应用中非常常见，例如用于显示详情、编辑表单或提示信息。 ...
在JavaScript编程领域，"弹出层特效点击按钮弹出窗口支持鼠标拖动"是一个常见的交互设计，用于增强用户体验。这个功能通常应用于各种网页应用中，比如提示信息、表单填写、图片预览等场景。本文件提供的就是一个实现...
在本文中，我们将深入探讨如何利用JavaScript实现一个弹出div窗口，包括支持遮罩、拖动、嵌入页面和换肤等功能。 首先，让我们了解“弹出窗口”或“弹出层”的概念。在网页设计中，弹出窗口通常指的是不依赖浏览器...
通过`<script>`标签引入了一个名为`mask-layer.js`的JavaScript文件，该文件包含了弹出层相关的脚本逻辑。 #### 4. 内联样式与脚本 ```html body { margin: 0 0; } <script type="text/javascript"> // ...
jQuery LayerModel是一款基于jQuery的弹出层插件，它提供了丰富的功能，包括创建各种类型的弹出窗口，如提示、信息、确认、加载等，并且支持弹出层的拖动效果。在网页交互设计中，弹出层是常用的一种增强用户体验的...
4. **封装JS**：为了便于重复使用，你可以将上述代码封装成一个插件或函数，接受参数来定制弹出层的行为，例如位置、内容等。 在提供的压缩包“弹出层并可鼠标拖动”中，包含了实现这一功能的具体文件，你可以通过...
总之，“弹出层拖动DEMO”是一个关于如何使用JavaScript实现可拖动弹出层的实例，对于学习网页交互设计和JavaScript事件处理的开发者来说，这是一个很好的学习资源。通过实践这个DEMO，你可以掌握弹出层拖动的核心...
支持弹出层的鼠标拖动移动，该部分用纯js编写执行效率更高 支持ajax加载页面到弹出层 支持一个页面，同时弹出多个层互不干扰 支持模式化弹出，带遮罩层 支持自定义弹出层样式 自带3个事件，开启、关闭、移除 ...