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

核心代码如下:

/**
 * 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();
	});
}

时间: 2024-10-22 06:19:06

jQuery弹出Iframe窗口,应该比$.dialog好用的相关文章

Jquery+div+css实现弹出登录窗口

基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

jQuery弹出窗口完整代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

jQuery 弹出窗口的形式一直是具体案件的中心

在网上查 多 不是不符合无效;因此,一些自己总结,解决这个问题 原则: 常见问题: 弹出层居中了,背景也是半透明的 可是发现一拉动滚动栏立即就露馅了发现背景仅仅设置了屏幕所在段,其它部分都是原来的样子,并且弹出层由于滚动栏移动不见了 这是网上大部分弹出层出现的普遍问题 问题解决的方法,有三种 1.利用IE6的漏洞,_top和使用css expresstion表达式 长处:不会抖动,通过计算得出位置,大部分浏览器都能够使用 缺点:不推荐使用css expresstion由于在做不论什么事件时css

jQuery 弹出窗口一直居中详细案例

在网上查了 很多 不是不符合就是效果不好;于是自己总结一番,解决此问题 原理: 常见问题: 弹出层居中了,背景也是半透明的 但是发现一拉动滚动条马上就露馅了发现背景只设置了屏幕所在段,其他部分都是原来的样子,而且弹出层因为滚动条移动不见了 这是网上大部分弹出层出现的普遍问题 问题解决办法,有三种 1.利用IE6的漏洞,_top和使用css expresstion表达式 优点:不会抖动,通过计算得出位置,大部分浏览器都可以使用 缺点:不推荐使用css expresstion因为在做任何事件时css

实用带多种CSS动画特效的jQuery弹出层插件hDialog.js

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel=&qu

Activity弹出右侧窗口

第一步: Activity弹出窗口的布局 <?xml version="1.0" encoding="UTF-8"?> //布局文件main_top_right_dialog <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:

SharePoint 2013 showModalDialog 弹出模式窗口

1. SharePoint 弹出框 本文讲述SharePoint 2013 中使用 SP.UI.ModalDialog.showModalDialog时 showModalDialog  未定义的问题. function showDialog(title,url,width,height) { var options = { url:url, args: 7, title: title, dialogReturnValueCallback: dialogCallback }; if (width

有关jquery弹出层

http://www.jb51.net/article/35216.htm   源地址 今天用到了 JQuery 弹出层,看了很多东西, 对于其他的用插件的还得下载,想了想 还得下载, 于是就 找了个只用这个的JQuery/javascript 的代码, 自我感觉用起来方便 那么 这个网址就给自己留着吧~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css 来自定义外观. fancybox 特点: 可以支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持: 可以自定义播放器的 css 样式: 可以以组的形式进行播放: 如果将鼠标滚动插件(mouse wheel plugin)包含进来的话 fancybox 还能支持鼠标滚轮滚