自己写了个基于frame的弹出框,解决了参数的传递,先记录下来,以便于以后自己下载!
效果如下:
/**
* author: code by ShareMu
*/
//获得顶层窗口对象
var topWindow = (function(p, c) {
while (p != c) {
c = p
p = p.parent
}
return c
})(window.parent, window);
//弹出窗口方法
function ShowModelDialog(url, titletext, backFn, width, height, params) {
var msgw, msgh, bordercolor;
msgw = (width ? width : 600);// 提示窗口的宽度
msgh = (height ? height : 400);// 提示窗口的高度
bordercolor = "#336699";// 提示窗口的边框颜色
titlecolor = "#99CCFF";// 提示窗口的标题颜色
var sWidth, sHeight;
var thisW = topWindow;
sWidth = thisW.document.documentElement.clientWidth;
sHeight = thisW.document.documentElement.clientHeight;
// 背景div
var bgDivId = getRandomStr(16, true, true, true);
var bgObj = new Element("div");
bgObj.setAttr("id", bgDivId);
bgObj.addStyle("position", "absolute");
bgObj.addStyle("top", "0");
bgObj.addStyle("background", "#777");
bgObj.addStyle("opacity", "0.6");
bgObj.addStyle("left", "0");
bgObj.addStyle("width", "100%");
bgObj.addStyle("height", sHeight);
bgObj = bgObj.element;
thisW.document.body.appendChild(bgObj);
var iframeObj = new Element("iframe");
var iframeObjId = getRandomStr(16, true, true, true);
iframeObj.setAttr("id", iframeObjId);
iframeObj.setAttr("name", "ifname");
iframeObj.addStyle("position", "absolute");
iframeObj.addStyle("top", "25px");
iframeObj.addStyle("filter", "Chroma(Color=white)");
iframeObj.addStyle("zIndex", "10000");
iframeObj.addStyle("width", "100%");
iframeObj.addStyle("left", "0");
iframeObj.addStyle("scrolling", "auto");
iframeObj.addStyle("height", msgh);
if(url)
{
if(params)
{
if(url.indexof("?")!=-1)
{
url = url+"&"+params;
}else{
url = url+"?"+params;
}
}
iframeObj.setAttr("src", url);
}
iframeObj = iframeObj.element;
iframeObj.style.border = "0";
iframeObj.style.background= "white";
// 消息div
var msgDivId = getRandomStr(16, true, true, true);
var msgObj = thisW.document.createElement("div")
msgObj.setAttribute("id", msgDivId);
msgObj.setAttribute("align", "center");
msgObj.style.position = "absolute";
msgObj.style.background = "white";
msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.width = msgw + "px";
msgObj.style.height = (msgh + 24) + "px";
var toph=sHeight - msgh;
if(toph<0)
{
toph = 0;
}
msgObj.style.top = (thisW.document.documentElement.scrollTop + toph/ 2)
+ "px";
msgObj.style.left = (sWidth - msgw) / 2 + "px";
msgObj.style.zIndex = "1000";
// 消息标题
var msgTitleId = getRandomStr(16, true, true, true);
var titleTable = thisW.document.createElement("div");
//var titleTableTR = thisW.document.createElement("div");
var titleTableMsgTD = thisW.document.createElement("div");
var closeTD = thisW.document.createElement("div");
titleTable.style.zIndex = "1000";
titleTable.id = msgTitleId;
titleTable.style.width = msgw-5;
titleTableMsgTD.style.width = msgw-2;
closeTD.style.right = "5";
closeTD.style.top = "0";
titleTable.style.display="inline";
titleTable.style.border = "1px solid " + titlecolor;
//titleTable.style.cursor = "pointer";
closeTD.style.position = "absolute";
titleTableMsgTD.setAttribute("align", "left");
titleTableMsgTD.style.height = "24";
titleTableMsgTD.style.border = "1px solid " + titlecolor;
titleTable.setAttribute("align", "left");
closeTD.setAttribute("align", "right");
titleTable.style.background = bordercolor;
titleTable.style.color = "white";
var msgtitleTableIdl = getRandomStr(16, true, true, true);
titleTableMsgTD.innerHTML = (titletext?titletext:"弹出框");
titleTableMsgTD.style.margin = "0";
//titleTableMsgTD.innerHTML = "弹出框";
closeTD.style.cursor = "pointer";
closeTD.innerHTML = "关闭";
closeTD.onclick = function() {
var rvalue = thisW.frames[iframeObjId].returnValue;
if (backFn) {
backFn(rvalue);
}
thisW.document.body.removeChild(bgObj);
thisW.document.getElementById(msgDivId).removeChild(titleTable);
thisW.document.body.removeChild(msgObj);
}
closeTD.style.margin = "0";
titleTable.appendChild(titleTableMsgTD);
titleTable.appendChild(closeTD);
msgObj.appendChild(titleTable);
msgObj.appendChild(iframeObj);
thisW.document.body.appendChild(msgObj);
//alert(thisW.document.getElementById(msgTitleId).id);
}
function Element(type, paret) {
this.element = topWindow.document.createElement(type);
}
Element.prototype.setAttr = function(name, value) {
this.element.setAttribute(name, value);
}
Element.prototype.addStyle = function(name, value) {
eval("this.element.style." + name + "=\"" + value + "\";");
}
//获得随机字符串 元素ID
function getRandomStr(str_0, str_1, str_2, str_3) {
var seed_array = new Array();
var seedary;
var i;
seed_array[0] = ""
seed_array[1] = "a b c d e f g h i j k l m n o p q r s t u v w x y z";
seed_array[2] = "a b c d e f g h i j k l m n o p q r s t u v w x y z";
seed_array[3] = "0 1 2 3 4 5 6 7 8 9";
if (!str_1 && !str_2 && !str_3) {
str_1 = true;
str_2 = true;
str_3 = true;
}
if (str_1) {
seed_array[0] += seed_array[1];
}
if (str_2) {
seed_array[0] += " " + seed_array[2];
}
if (str_3) {
seed_array[0] += " " + seed_array[3];
}
seed_array[0] = seed_array[0].split(" ");
seedary = ""
for (i = 0; i < str_0; i++) {
seedary += seed_array[0][Math.round(Math.random()
* (seed_array[0].length - 1))]
}
return (seedary);
}
- 大小: 23.1 KB
- 大小: 23.1 KB
分享到:
相关推荐
标题"iframe弹出框遮罩父类页面"正是关于这个技术点的讨论。在描述中提到,通过查看demo中的`layout.html`页面可以直观地看到效果,并且实现这一功能并不需要在父页面中编写子页面的JavaScript或弹出框代码,所有...
这通常涉及到对视图层次的控制,如将弹出框添加到当前视图的父视图上,并设置其frame、透明度等属性来实现动画效果。此外,还需要实现关闭弹出框的逻辑,例如点击背景时消失或选择某项后关闭。 为了实现QQ弹出框的...
自定义弹出框通常基于UIView或UIViewController来构建,这允许我们完全控制其外观和行为。首先,我们需要创建一个新的UIView子类,并在其内添加所需的UI元素,如按钮、文本标签等。布局可以通过AutoLayout或Size ...
接下来,我们将介绍一种基于Swift的简单实现方法: ```swift import UIKit class RadioButton: UIView { var isSelected = false { didSet { updateView() } } let circleView = UIView() let dotView = ...
本文将详细探讨基于tipswindown插件修改的jQuery兼容弹出层,其特性包括最大化操作、拖拽、遮罩以及对页面和frame窗体的展示支持。 首先,tipswindown是原生的弹出提示插件,但在本案例中,开发者对其进行了深入的...
多种编辑方式支持包括弹出表单编辑、打开tab标签编辑、网格内行编辑、网格内表单编辑 (9)支持表单字段自定义,包括可编辑性自定义、控件类型和宽度自定义、字段验证自定义 (10)支持单据编码规则自定义 (11)...
本资源提供的是一款基于`iframe`的弹出层插件代码,适用于各种场景,如表单提交、内容预览、广告展示等。`iframe`全称为"inline frame",是HTML的一种元素,允许网页嵌入另一个网页,从而实现内容的动态加载和隔离。...
jQuery的弹出层通常基于div元素,通过修改其样式(如display属性)来控制显示和隐藏。 弹出层是Web设计中常见的元素,它可以用于显示额外的信息、表单、图片或其他互动内容。在这个例子中,弹出层是iframe形式,...
在iOS开发中,为了提供更好的用户体验,视图的弹出动画常常被用来吸引用户的注意力,例如在分享功能中。"视图pop弹出动画 类似于网易新闻的分享"这个主题,就是关于如何实现一种与网易新闻客户端分享效果类似的动画...
jQuery UI Frame Dialog是一款基于jQuery UI库的对话框插件,用于在网页中创建具有框架效果的弹出对话框。在官方1.1.2版本中,存在一个CSS加载问题,导致对话框的样式可能无法正常显示,影响了用户体验。这个问题在...
2. **动画**:使用`UIView.animate(withDuration:)`方法来实现视图弹出的动画效果,包括改变frame、透明度等属性。 3. **手势识别**:可能包含手势识别(如TapGesture、PanGesture)来监听用户的操作,如关闭弹出...
在iOS应用开发中,创建一个从下往上弹出的子视图窗口是一种常见的交互设计,通常用于显示模态对话框、菜单或者加载更多的内容。这种效果可以为用户提供一种直观且吸引人的体验。在这个"ios应用源码之从下往上弹出的...
- 为了实现弹出效果,可以调整列表的frame或使用动画改变其透明度和位置,使其从按钮下方或旁边滑出。 - 考虑到用户体验,可以添加阴影效果,使得弹出菜单看起来像是浮在其他内容之上。 4. **交互处理** - 为...
5. **处理弹出框**:网页中的弹出框可能需要JavaScript处理。Python的`selenium`库可以模拟浏览器行为,包括点击弹出框、处理JavaScript事件。如果你遇到需要用户交互的弹出框,可能需要用到这个库。 6. **不同的...
3. **动画效果**: 弹出动画是`SuspendButton`的一大特点,这通常涉及到`UIView`的动画方法,如`animate(withDuration:)`。通过调整frame、transform属性或使用`CATransition`来实现平滑的显示和隐藏效果。 4. **...
6. **弹出框(Popup Menu)**:显示当前选项,也可弹出完整选项列表。 7. **编辑框(Edit Box)**:让用户输入数据。 8. **滑动条(Slider)**:提供数值输入,通过滑动调整参数。 9. **静态文本(Static Text)**:显示固定...
例如,添加一个“打开”按钮,当用户点击时,弹出文件选择对话框,加载选定的图像文件。 六、图像处理功能实现 在MFC应用中实现图像处理功能,通常分为以下步骤: 1. 用户通过界面选择图像文件。 2. 使用CFile或...
1. **Popup(弹出窗口)**:在Web开发中,Popup通常指的是一个非持久性的窗口或对话框,它在用户与页面交互时临时出现,展示额外的信息或功能。在这里,Popup是指当用户右键点击某个元素时,显示的日期时间选择器。 ...
这行代码会弹出一个消息框,显示名为"main"的frame内的HTML内容。 2. **获取frame的HTMLDocument接口**: `HTMLDocument`接口是用于操作HTML文档的主要接口,通过WebBrowser控件的`DomDocument`属性可以获取到。...
本文将深入探讨如何利用EasyUI的Window插件在Layout框架页面中实现弹出窗体到最顶层的效果,尤其是当窗体需要穿越iframe时。 首先,我们需要理解jQuery EasyUI的Window组件。Window是EasyUI中的一个动态弹出窗口,...