垮frame的弹出层

最新推荐文章于 2022-01-21 23:13:42 发布
最新推荐文章于 2022-01-21 23:13:42 发布
阅读量827 收藏
点赞数
文章标签： function microsoft null html opera filter

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<meta http-equiv ="Content-Type " content ="text/html;charset=utf-8 " />
<title> 跨frame的弹出层</title>
</head>
<body>
<table style ="width:100%; ">
<tr>
<td width ="50% "> <p> <select> <option> Select box here</option> </select> </p> <iframe src ="about:blank "> </iframe> </td>
<td width ="50% " onclick ="x.open('title here','<form><h1>user info 1</h1><p>name: <input type=text></p><p>sex: <select><option>male</option></select></p></form>',350,200); "> Click here for test</td>
</tr>
</table>
<script>
var dragDrop = function(dragArea,moveArea){//拖拽
this.dragArea = dragArea;
this.moveArea = moveArea;
this.xdom = null;
this.mask = null;//遮挡iframe
this.x = 0;
this.y = 0;
this.dbsw = top.document.scrollWidth;
this.dbsh = top.document.scrollHeight;
this.init();
};
dragDrop.prototype = {
getPosition:function(){//取元素坐标，如元素或其上层元素设置position relative，应该getpos(子元素).y-getpos(父元素).y
return document.documentElement.getBoundingClientRect && function(o){//IE,FF,Opera
var pos = o.getBoundingClientRect(), root = o.ownerDocument || o.document;
return {x:pos.left+root.documentElement.scrollLeft,y:pos.top+root.documentElement.scrollTop};
} || function(o){//Safari,Chrome,Netscape,Mozilla
var x = 0, y = 0;
do{x += o.offsetLeft;y += o.offsetTop;}while((o=o.offsetParent));
return {'x':x,'y':y};
};
}(),
setPos:function(obj,x,y){
obj.style.left = x + "px";
obj.style.top = y + "px";
},
mDown:function(e){
var isWK = (/applewebkit/i.test(navigator.appVersion.replace(//s/g,'')));
var pos = this.getPosition(this.moveArea);
this.x = (isWK)?e.offsetX:(e.clientX-pos.x);
this.y = (isWK)?e.offsetY:(e.clientY-pos.y);
pos = null;
if(this.dragArea.setCapture){this.dragArea.setCapture();}else{e.preventDefault();}
this.mask.style.left = this.xdom.parentNode.scrollLeft+'px';
this.mask.style.top = this.xdom.parentNode.scrollTop+'px';
this.mask.style.display = 'block';
this.xdom.onmousemove = this.mMove.bind(this);
this.xdom.onmouseup = this.mUp.bind(this);
},
mMove:function(e){
this.dragArea.style.cursor = "move";
e = e||window.event;
var mx = (e.clientX - this.x);
var my = (e.clientY - this.y);
var rx = this.xdom.offsetWidth-this.moveArea.offsetWidth;
var ry = this.xdom.offsetHeight-this.moveArea.offsetHeight;
mx = (mx<=0)?0:(mx>=rx)?rx:mx;
my = (my<=0)?0:(my>=ry)?ry:my;
this.setPos(this.moveArea,mx,my);
},
mUp:function(e){
this.dragArea.style.cursor = "default";
e = e||window.event;
var mx = (e.clientX - this.x);
var my = (e.clientY - this.y);
var rx = this.xdom.offsetWidth-this.moveArea.offsetWidth;
var ry = this.xdom.offsetHeight-this.moveArea.offsetHeight;
mx = (mx<=0)?0:(mx>=rx)?rx:mx;
my = (my<=0)?0:(my>=ry)?ry:my;
this.setPos(this.moveArea,mx,my);
if(this.dragArea.releaseCapture){this.dragArea.releaseCapture();}
this.mask.style.display = 'none';
this.xdom.onmousemove = function(){};
this.xdom.onmouseup = function(){};
},
init:function(){
if(Function.prototype.bind==undefined){
Function.prototype.bind = function(obj){
var owner = this,args = Array.prototype.slice.call(arguments),callobj = Array.prototype.shift.call(args);
return function(e){e=e||top.window.event||window.event;owner.apply(callobj,[e].concat(args));}
};
}
var ieop = (/(?:microsoft|opera)/i.test(navigator.appName));
var xDom = (window.top.document==document)?document:(window.top.document.body.tagName!='BODY')?document:window.top.document;
this.xdom = (window.top.document==document)?document.body:(window.top.document.body.tagName=='BODY')?window.top.document.body:(ieop)?document.body:window.top.document.documentElement;
var xdoc = xDom.createDocumentFragment();
this.mask = xDom.createElement('div');
this.mask.style.cssText = 'display:none;position:absolute;left:0;top:0;width:110%;height:110%;overflow:hidden;background:#000;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);z-index:9999;';
xdoc.appendChild(this.mask);
this.xdom.appendChild(xdoc);
xDom = xdoc = null;
this.moveArea.style.position = "absolute";
this.moveArea.style.zIndex = 10000;
this.dragArea.onmousedown = this.mDown.bind(this);
}
};
var maskTips = function(width,height){//遮罩提示框
this.width = width||500;
this.height = height||400;
this.xdom = null;
this.mask = null;
this.ifr = null;
this.layer = null;
this.title = null;
this.content = null;
this.isOpen = false;
this.init();
};
maskTips.prototype = {
getStyle:function(dom,stylename){
if(dom.currentStyle){
return dom.currentStyle[stylename];
}else{
return window.getComputedStyle(dom,null).getPropertyValue(stylename);
}
},
open:function(title,content,width,height){
var xdom = this.xdom.documentElement;xelm = this.xdom.body;width = width||this.width;height = height||this.height;
xdom.style.width = '100%';xdom.style.height = '100%';xdom.style.overflow = 'hidden';
xelm.style.width = '100%';xelm.style.height = '100%';xelm.style.overflow = 'hidden';
this.ifr.style.left = xdom.scrollLeft+'px';
this.ifr.style.top = xdom.scrollTop+'px';
this.ifr.style.display = 'block';
this.mask.style.left = xdom.scrollLeft+'px';
this.mask.style.top = xdom.scrollTop+'px';
this.mask.style.display = 'block';
this.content.style.width = width-10+'px';
this.content.style.height = height-40+'px';
var left = xdom.scrollLeft+xdom.offsetWidth/2-(width/2)+'px';
var top = xdom.scrollTop+this.mask.offsetHeight/2-(height/2)+'px';
this.layer.style.width = width+'px';
this.layer.style.height = height+'px';
this.layer.style.left = left;
this.layer.style.top = top;
this.title.innerHTML = title;
this.content.innerHTML = content;
this.layer.style.display = 'block';
this.isOpen = true;
},
hide:function(){
this.layer.style.display = 'none';
this.mask.style.display = 'none';
this.ifr.style.display = 'none';
var xdom = this.xdom.documentElement,xelm = this.xdom.body;
xdom.style.width = 'auto';xdom.style.height = 'auto';xdom.style.overflow = 'auto';
xelm.style.width = 'auto';xelm.style.height = 'auto';xelm.style.overflow = 'auto';
this.isOpen = false;
},
init:function(){
var cssMask = 'display:none;position:absolute;left:0;top:0;width:110%;height:110%;overflow:hidden;background:#000;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);z-index:101;border:none;';
var cssIfr = 'display:none;position:absolute;left:0;top:0;width:110%;height:110%;overflow:hidden;background:#fff;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);z-index:100;border:none;';
var cssLayer = 'display:none;position:absolute;left:0;top:0;width:'+this.width+'px;height:'+this.height+'px;overflow:hidden;zoom:1;background:white;border:5px solid #ddd;z-index:102;padding:0;';
var ieop = (/(?:microsoft|opera)/i.test(navigator.appName));
var xDom = (window.top.document==document)?document:(window.top.document.body.tagName!='BODY')?document:window.top.document;
var xElm = (window.top.document==document)?document.body:(window.top.document.body.tagName=='BODY')?window.top.document.body:(ieop)?document.body:window.top.document.documentElement;
this.xdom = xDom;
var xdoc = xDom.createDocumentFragment();
this.mask = xDom.createElement('div');
this.ifr = xDom.createElement('iframe');
this.layer = xDom.createElement('div');
xdoc.appendChild(this.ifr);
xdoc.appendChild(this.mask);
xdoc.appendChild(this.layer);
this.layer.innerHTML = '<div style="height:30px;background:#ddd;text-align:right;overflow:hidden;zoom:1;"><h3 style="float:left;margin:0;padding:0;">title</h3><button style="width:20px;font-size:12px;padding:0;text-align:center;">X</button></div><div class="tips-bd" style="width:'+(this.width-10)+'px;height:'+(this.height-40)+'px;padding:5px;overflow:auto;">content</div><div class="tips-ft"></div>';
this.mask.style.cssText = cssMask;
this.ifr.style.cssText = cssIfr;
this.layer.style.cssText = cssLayer;
this.title = this.layer.childNodes[0].childNodes[0];
this.content = this.layer.childNodes[1];
new dragDrop(this.layer.childNodes[0],this.layer);
this.layer.getElementsByTagName('button')[0].onclick = (function(o){return function(){o.hide()}})(this);
window.setTimeout(function(){xElm.appendChild(xdoc);xDom = xElm = xdoc = null;});
}
};
var x = new maskTips(300,200);
</script>
</body>

</html>

 

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>跨frame的弹出层</title>
</head>
<frameset rows="300,*">
<frame src="x.html"></frame>
<frame src="#"></frame>
</frameset>
</html>

linfengv
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iOS 滑动tableview弹出层
01-19
在显示和隐藏弹出层时，使用UIView的`animate(withDuration:animations:)`方法来改变其frame、透明度等属性。 6. **适配不同设备和方向**：考虑到屏幕尺寸和设备方向的变化，需要确保弹出层在各种情况下都能正确...
iframe弹出层插件代码
02-17
在IT行业中，弹出层（通常称为modal或popup）是一种常见的网页设计元素，它用于在用户与页面交互时提供额外的信息或功能，而不会中断主页面的浏览体验。本资源提供的是一款基于`iframe`的弹出层插件代码，适用于各种...
跨框架的弹出层
weixin_33991418的博客
01-28 163
对于跨框架弹出层这个问题，相信很多的朋友都遇到过，本人也是研究了很久，小有成就，在此与大家分享一下。首先要感谢“ZH CEXO”这位网友，本人的成就是基于在他的基础上的。要看原文请点击http://www.zhcexo.com/how-to-put-div-over-frame/，本人在此不再详述。 首先看效果预览图：画红边框的代表是三个iframe框架 ...
iFrame的妙用作为弹出层铺底覆盖
09-28
首先，我们需要在弹出的DIV同级位置插入一个iFrame，设置其`z-index`值小于弹出层的`z-index`，这样确保iFrame位于弹出层下方，但仍然在页面其他元素之上。同时，通过监听`window.resize`和`window.scroll`事件，...
弹出层iframe
02-17
标题中的“弹出层iframe”是指在网页设计中使用的一种技术，它将一个网页（或部分内容）通过IFRAME元素嵌入到一个弹出窗口中。这种技术常用于实现模态对话框、浮窗或者页面内小窗口的效果，让用户可以在不离开当前...
layer弹出层 iframe层去掉滚动条的实例代码
10-18
在网页开发中，有时我们需要创建弹出层来展示特定的内容，比如使用layer库。Layer是一个功能强大的前端弹层组件，广泛应用于提示、对话框、模态窗口等多种场景。在这个问题中，我们关注的是如何在layer弹出层中的...
多个iframe，显示其中一个frame中的div，并处于最上层显示
10-25
多个iframe，显示其中一个frame中的div，并处于最上层显示 并且页面中的填写的值，可以传到弹出的div页面中 最近一段时间在做这个东西，给大家分享一下 附带测试代码 js弹出div层
div在最顶层显示----弹出框效果
Xiaomi8261的博客
03-29 1402
div显示在最顶层,并且背景层变暗. 效果图如下: 代码:html文件内容如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=...
div弹出窗口在frameset外层解决方案
热门推荐
活在当下 乐在其中
04-20 2万+
首页通过framset经行网页布局，现在有个临时的消息窗口，ajax返回会弹出来。但是这个就有问题了。div作为网页元素，是依赖与frame的。怎么让其在整个视图窗口的最上层呢？ frmae 连接网页，会对超过的部分进行遮挡。这里提供了一种解决方案.先记录下来。 index.jsp        sorry your browser doesn't accept
JQuery.BlockUI弹出层
caiyl1314的专栏
10-28 1551
在一页面单击按钮或其他方式触发，弹出层 引入所需文件 在父窗口里定义函数 function tanchu(){ window.setTimeout(function(){ // var id = grid_storein.getSelectedRowId(); //parent.window.openWin('肿瘤上报单','828','6
selenium中，div弹出提示框，如何定位？
weixin_36273267的博客
05-20 9620
弹出框是用div模拟出来的，用switch_to_window和switch_to_frame是切换不过去的，那么如何去定位到弹框呢？ 可以这样处理： 一般弹出窗口那个mainFrame是同一层窗口，同时mianframe在顶层窗口下面，所以这里我通browser.switch_to_default_content()语句返回到顶层窗口，然后在用browser.find_element_by_xpath语句定位我想要查找的页面元素。 最新版本的selenium中会建议你用self.driver.swi
window弹出框在iframe之外显示
彷徨de等待
12-19 8758
Ext.net 使用了tab 控件，但是加载的时候用的iframe，导致里面如果有window弹出框，并且要全屏显示的时候，不能跳出iframe显示。 function addMainTab(tabPanel, url, id, title, icon) { var tab = Ext.getCmp(id); if (!tab) { tab
多全局对象就是跨窗口或跨frame操作
weixin_47599108的博客
01-21 113
多全局对象解释 简单来说:多全局对象就是跨窗口或跨frame操作。 全局环境 在浏览器中，我们的脚本可能需要在多个窗口之间进行交互。多个窗口意味着多个全局环境，不同的全局环境拥有不同的全局对象，从而拥有不同的内置类型构造函数。 这可能会引发一些问题。 比如，表达式 [] instanceof window.frames[0].Array 会返回false，因为 Array.prototype !== window.frames[0].Array.prototype，因此你必须使用 Array.isAr
用Selenium点击按钮后再重新获取改动后的页面，查找弹出层按钮
最新发布
07-13
如果弹出层是通过iframe嵌入在页面中的，则需要使用`switch_to.frame()`方法切换到该iframe。你需要将`iframe_id`替换为实际的iframe元素的id或其他定位方式。 5. 使用Selenium找到弹出层上的按钮元素： ```python...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值