jQuery弹出Iframe窗口,应该比$.dialog好用

简介: 核心代码如下:/** * iframe弹出层 例子:openDialogByIframe(550,450,'新建单位','add.do'); * * @param width * 宽 * @param height * 高 * @param tit * 标题 * @param url *
核心代码如下:
/**
 * iframe弹出层 例子:openDialogByIframe(550,450,'新建单位','add.do');
 * 
 * @param width
 *            宽
 * @param height
 *            高
 * @param tit
 *            标题
 * @param url
 *            iframe的URL地址
 */
function openDialogByIframe(width, height, tit, url) {
	var winWinth = $(window).width(), winHeight = $(document).height();
	$("body").append("<div class='yz_popIframeDiv'></div>");
	$("body")
			.append(
					"<div class='yz_popTanChu'><div class='yz_popTanChutit'><span class='yz_popTanChuTxt'>"
							+ tit
							+ "</span><span class='yz_popTanChuClose'>关闭</span></div><iframe class='winIframe' frameborder='0' hspace='0' src="
							+ url + "></iframe></div>");
	$(".yz_popIframeDiv").css({
		width : winWinth,
		height : winHeight,
		background : "#000",
		position : "absolute",
		left : "0",
		top : "0"
	});
	$(".yz_popIframeDiv").fadeTo(0, 0.5);
	var yz_popTanChuLeft = $(window).width() / 2 - width / 2;
	var yz_popTanChuTop = $(window).height() / 2 - height / 2
			+ $(window).scrollTop();
	$(".yz_popTanChu").css({
		width : width,
		height : height,
		border : "3px #ccc solid",
		left : yz_popTanChuLeft,
		top : yz_popTanChuTop,
		background : "#fff",
		position : "absolute"
	});
	$(".yz_popTanChutit").css({
		width : width,
		height : "25px",
		"border-bottom" : "1px #ccc solid",
		background : "#eee",
		"line-height" : "25px"
	});
	$(".yz_popTanChuTxt").css({
		"text-indent" : "5px",
		"float" : "left",
		"font-size" : "14px"
	});
	$(".yz_popTanChuClose").css({
		"width" : "40px",
		"float" : "right",
		"font-size" : "12px",
		"color" : "#667",
		"cursor" : "pointer"
	});
	var winIframeHeight = height - 26;
	$(".winIframe").css({
		width : width,
		height : winIframeHeight,
		"border-bottom" : "1px #ccc solid",
		background : "#ffffff"
	});
	$(".yz_popTanChuClose").hover(function() {
		$(this).css("color", "#334");
	}, function() {
		$(this).css("color", "#667");
	});
	$(".yz_popTanChuClose").click(function() {
		$(".yz_popIframeDiv").remove();
		$(".yz_popTanChu").remove();
	});
}

相关文章
|
5月前
|
JavaScript
JS/JQuery操作iframe元素
JS/JQuery操作iframe元素
|
JavaScript 测试技术 容器
JQuery 获取元素到浏览器可视窗口边缘的距离
JQuery 获取元素到浏览器可视窗口边缘的距离
103 0
|
JavaScript 前端开发 测试技术
JQuery iframe宽高度自适应浏览器窗口大小的解决方法
JQuery iframe宽高度自适应浏览器窗口大小的解决方法
218 0
|
前端开发 JavaScript
用jquery操作iframe
用jquery操作iframe
133 0
|
JavaScript
jQuery处理元素和浏览器窗口的尺寸
jQuery 尺寸 通过 jQuery,很容易处理元素和浏览器窗口的尺寸。 jQuery 尺寸方法 jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHeight() outerWidth() outerHeight() image.png 元素的宽高 width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
1098 0
|
Web App开发 前端开发 JavaScript