`
august_000
  • 浏览: 34031 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

基于frame的弹出框

阅读更多
自己写了个基于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弹出框遮罩父类页面

    标题"iframe弹出框遮罩父类页面"正是关于这个技术点的讨论。在描述中提到,通过查看demo中的`layout.html`页面可以直观地看到效果,并且实现这一功能并不需要在父页面中编写子页面的JavaScript或弹出框代码,所有...

    qq样式弹出框

    这通常涉及到对视图层次的控制,如将弹出框添加到当前视图的父视图上,并设置其frame、透明度等属性来实现动画效果。此外,还需要实现关闭弹出框的逻辑,例如点击背景时消失或选择某项后关闭。 为了实现QQ弹出框的...

    ios 弹出框

    自定义弹出框通常基于UIView或UIViewController来构建,这允许我们完全控制其外观和行为。首先,我们需要创建一个新的UIView子类,并在其内添加所需的UI元素,如按钮、文本标签等。布局可以通过AutoLayout或Size ...

    单选按钮ios单选框

    接下来,我们将介绍一种基于Swift的简单实现方法: ```swift import UIKit class RadioButton: UIView { var isSelected = false { didSet { updateView() } } let circleView = UIView() let dotView = ...

    Jquery兼容弹出层

    本文将详细探讨基于tipswindown插件修改的jQuery兼容弹出层,其特性包括最大化操作、拖拽、遮罩以及对页面和frame窗体的展示支持。 首先,tipswindown是原生的弹出提示插件,但在本案例中,开发者对其进行了深入的...

    Rookey.Frame企业级极速开发框架.zip

    多种编辑方式支持包括弹出表单编辑、打开tab标签编辑、网格内行编辑、网格内表单编辑 (9)支持表单字段自定义,包括可编辑性自定义、控件类型和宽度自定义、字段验证自定义 (10)支持单据编码规则自定义 (11)...

    iframe弹出层插件代码

    本资源提供的是一款基于`iframe`的弹出层插件代码,适用于各种场景,如表单提交、内容预览、广告展示等。`iframe`全称为"inline frame",是HTML的一种元素,允许网页嵌入另一个网页,从而实现内容的动态加载和隔离。...

    jquery弹出层插件点击弹出层可拖动,弹出层为umeditor

    jQuery的弹出层通常基于div元素,通过修改其样式(如display属性)来控制显示和隐藏。 弹出层是Web设计中常见的元素,它可以用于显示额外的信息、表单、图片或其他互动内容。在这个例子中,弹出层是iframe形式,...

    视图pop弹出动画 类似于网易新闻的分享

    在iOS开发中,为了提供更好的用户体验,视图的弹出动画常常被用来吸引用户的注意力,例如在分享功能中。"视图pop弹出动画 类似于网易新闻的分享"这个主题,就是关于如何实现一种与网易新闻客户端分享效果类似的动画...

    jQuery UI Frame Dialog官方修正版(官方1.1.2版本上面有问题)

    jQuery UI Frame Dialog是一款基于jQuery UI库的对话框插件,用于在网页中创建具有框架效果的弹出对话框。在官方1.1.2版本中,存在一个CSS加载问题,导致对话框的样式可能无法正常显示,影响了用户体验。这个问题在...

    IOS应用源码Demo-从下往上弹出的子视图窗口-毕设学习.zip

    2. **动画**:使用`UIView.animate(withDuration:)`方法来实现视图弹出的动画效果,包括改变frame、透明度等属性。 3. **手势识别**:可能包含手势识别(如TapGesture、PanGesture)来监听用户的操作,如关闭弹出...

    ios应用源码之从下往上弹出的子视图窗口 2018127

    在iOS应用开发中,创建一个从下往上弹出的子视图窗口是一种常见的交互设计,通常用于显示模态对话框、菜单或者加载更多的内容。这种效果可以为用户提供一种直观且吸引人的体验。在这个"ios应用源码之从下往上弹出的...

    iOS开发 点击按钮弹出按钮列表菜单

    - 为了实现弹出效果,可以调整列表的frame或使用动画改变其透明度和位置,使其从按钮下方或旁边滑出。 - 考虑到用户体验,可以添加阴影效果,使得弹出菜单看起来像是浮在其他内容之上。 4. **交互处理** - 为...

    Python入门自动登录自动点击源码

    5. **处理弹出框**:网页中的弹出框可能需要JavaScript处理。Python的`selenium`库可以模拟浏览器行为,包括点击弹出框、处理JavaScript事件。如果你遇到需要用户交互的弹出框,可能需要用到这个库。 6. **不同的...

    swift-Suspendbutton悬浮按钮以及动画弹出

    3. **动画效果**: 弹出动画是`SuspendButton`的一大特点,这通常涉及到`UIView`的动画方法,如`animate(withDuration:)`。通过调整frame、transform属性或使用`CATransition`来实现平滑的显示和隐藏效果。 4. **...

    基于MFC的图像处理功能实现

    例如,添加一个“打开”按钮,当用户点击时,弹出文件选择对话框,加载选定的图像文件。 六、图像处理功能实现 在MFC应用中实现图像处理功能,通常分为以下步骤: 1. 用户通过界面选择图像文件。 2. 使用CFile或...

    基于popup(右键)的日期时间选择控件

    1. **Popup(弹出窗口)**:在Web开发中,Popup通常指的是一个非持久性的窗口或对话框,它在用户与页面交互时临时出现,展示额外的信息或功能。在这里,Popup是指当用户右键点击某个元素时,显示的日期时间选择器。 ...

    C#的WebBrowser操作frame实例解析

    这行代码会弹出一个消息框,显示名为"main"的frame内的HTML内容。 2. **获取frame的HTMLDocument接口**: `HTMLDocument`接口是用于操作HTML文档的主要接口,通过WebBrowser控件的`DomDocument`属性可以获取到。...

    jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)

    本文将深入探讨如何利用EasyUI的Window插件在Layout框架页面中实现弹出窗体到最顶层的效果,尤其是当窗体需要穿越iframe时。 首先,我们需要理解jQuery EasyUI的Window组件。Window是EasyUI中的一个动态弹出窗口,...

Global site tag (gtag.js) - Google Analytics