需要引用JQuery。

/*!
* 主 题:《页面弹出窗口》
* 说 明:用于页面弹出的窗口。
* 功能描述:
* 1、生成弹出窗口,窗口内包括iframe控件;
* 2、窗口弹出时,生成背景遮罩;
*/
function OpenPageBox() {
new PageBox("标题栏", "test.htm?“, 1000, 435).Open();
} //title:窗口标题
//url:链接地址
//width:窗口宽度
//height:窗口高度
//new PageBox(title, url, width, height)
function PageBox(title, url, width, height) {
this.Init(title, url, width, height);
}
//初始化参数
PageBox.prototype.Init = function (title, url, width, height) {
this.Title = title != null && title != "" ? title : "";
this.url = url;
this.Width = width;
this.Height = height;
this.WinId = new Date().getTime() + "_" + Math.floor(Math.random() * 1000 + 1);
}
//创建窗口,并打开
PageBox.prototype.Open = function () {
//判断是否已经存在窗口
var WinBox = $("#PageBox[winId='" + this.WinId + "']");
if (WinBox.size() > 0) return;
PageBox.Close();
//生成窗口
this.Mask();
this.BuildFrame();
this.BuildIFrame();
}
//生成窗体外框,包括标题
PageBox.prototype.BuildFrame=function()
{
//屏幕的宽高
var hg=document.documentElement.clientHeight;
var wd = document.documentElement.clientWidth; $("#body").append("<div id=\"PageBox\" type=\"PageBox\" winId=\"" + this.WinId + "\"></div>");
var PageBox=$("#PageBox");
this.WinBox=PageBox;
//设置窗口的位置
PageBox.css("top", $(window).scrollTop()+100);
PageBox.css("left",(wd-this.Width)/2);
PageBox.css("position", "absolute").css("z-index", "10002");
PageBox.css("width",this.Width);
PageBox.css("height", this.Height); this.BuildTitle();
}
//生成标题栏
PageBox.prototype.BuildTitle = function () { var box = this.WinBox;
box.append("<div id=\"PageBoxTitle\"></div>");
var titbox = $("#PageBoxTitle");
var tm = "<div id=\"PageBoxTitleTxt\">" + this.Title + "</div>";
tm += "<div id=\"PageBoxClose\">X</div>";
titbox.append(tm); $("#PageBoxClose").click(function () {
PageBox.Close();
});
box.width(this.WinBox.width());
box.height(this.WinBox.height());
}
//生成页面frame区域
PageBox.prototype.BuildIFrame = function () {
var box = this.WinBox;
var width = box.width();
//标题栏的高度
var titHg = $("#PageBoxTitle").height();
var height = this.WinBox.height() - titHg; var frame = "";
frame += "<iframe src=\"" + this.url + "\" name=\"PageBoxIframe\" id=\"PageBoxIframe\" ";
frame += "width=\"" + width + "\"";
frame += "height=\"" + height + "\"";
frame += "marginwidth=\"0\" marginheight=\"0\" align=\"top\" scrolling=\"auto\"";
frame += "frameborder=\"0\" >";
frame += "</iframe>";
box.append(frame);
}
//关闭窗口
PageBox.Close = function () {
$("#PageBox").remove();
$("#screenMask").fadeOut("slow"); }
//生成遮罩层
PageBox.prototype.Mask=function(){
var mask = $("#screenMask");
mask.remove();
mask = null
delete mask;
var html = "<div id=\"screenMask\"/>";
$("body").append(html);
mask = $("#screenMask");
mask.css("position", "absolute");
mask.css("z-index", "10000");
//屏幕的宽高
var hg = $("body").height();
var wd = document.documentElement.clientWidth;
//设置遮罩的宽高
mask.css("width", wd);
mask.css("height", hg);
mask.css("top", 0);
mask.css("left", 0);
var alpha = 60;
mask.css("background-color", "#ECF7FF");
mask.css("filter", "Alpha(Opacity=" + alpha + ")");
mask.css("display", "block");
mask.css("-moz-opacity", alpha / 100);
mask.css("opacity", alpha / 100);
mask.fadeIn("slow");
}

效果预览:

其样式可使用外部样式表控制:

/*窗口标题栏*/
#PageBoxTitle{
background:#3366FF;
height:25px;
color:#fff;
}
/*窗口标题栏字体*/
#PageBoxTitleTxt{
float:left;
width:300px;
}
/*窗口样式*/
#PageBox{
border: 3px solid #3366FF;
}
/*窗口关闭样式*/
#PageBoxClose{
width:25px;
height:25px;
font-size:25px;
margin-right:20px;
float:right;
text-align:center;
cursor:default;
}

20160513--js 弹出窗口带有iframe控件 备忘的更多相关文章

  1. winfrom弹出窗口用timer控件控制倒计时20秒后关闭

    功能描述: 因为在程序退出时需要确认是否是误操作,所以加了密码输入的子窗体,子窗体在20秒内会自动关闭 代码如下: private int count; private void Form2_Load ...

  2. JS弹出窗口代码大全(详细整理)

    1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; < ...

  3. js弹出窗口的学习和使用

    Thickbox Thickbox是基于Jquery的,因此使用Thickbox需要下面四个文件: Thickbox.js----Thickbox主文件 CSS文件----Thickbox.css 最 ...

  4. js弹出窗口总结6种弹窗方法

    注: //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close(); ...

  5. 最完美解决方案:js弹出窗口关闭当前页面,而不弹出提示框

    该功能主要用于业务系统中的登录操作,登录后弹出全屏的业务系统主界面,而不需要工具栏.地址栏.菜单等功能. 之前针对不同浏览器找了无数种方法,包括网上能查到的所有方法,弹出的结果都不理想.结果有的IE6 ...

  6. js 弹出窗口 防止拦截,突破阻止,保存后打开

    <script language="javascript"> function orderprint() { var formUrl = "savedata_ ...

  7. [Flex] IFrame系列 —— IFrame嵌入html后Alert弹出窗口被IFrame遮挡问题

    <?xml version="1.0" encoding="utf-8"?> <!--- - - - - - - - - - - - - - ...

  8. 编写在浏览器中不弹出警告的ActiveX控件

    我们在编写ActiveX控件时,如果用在浏览器中,经常都会弹出现在运行的脚本不安全的提示, 如果给客户使用,将会带来极大不便.按照MSDN的介绍通常有两种一种是实现IObjectSafe接口,一种是通 ...

  9. 使用DIV弹出框的代码示例,备忘。

    1.思路 使用DIV模拟弹出框,一共用三个div: divWindow: 原来的界面内容区域 divLogin:要弹出的内容区域 divBackground:给弹出内容区域做个遮罩的区域. 点击 “请 ...

随机推荐

  1. POJ练习计划

    题目链接:https://cn.vjudge.net/article/348 2019/7/24: [POJ-1423] [题解] [POJ-1503] 模板题

  2. git分支/标签操作

    git分支类似于某一个模块,等到所有模块开发完毕时,最后聚合在一起形成一个项目.而分支之间一般是不会受影响的. git 分支的基本操作: git branch branchname 表示创建分支,新建 ...

  3. VSCode配置 Debugger for Chrome插件

    Debugger for Chrome这个插件是直接在vscode里面进行调试js文件,跟谷歌的控制台是一样的功能,下载了它就不用打开浏览器的控制台就能进行打断点. 首先在左侧扩展栏找到这个插件下载好 ...

  4. CSS完整

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...

  5. linux下解压缩.tar.bz2到某目录下

    1\可先进入要解压的目的目录,然后使用tar命令 比如我要将桌面的a.tar.bz2解压到/var/b cd   /var/b tar   -xjf   /root/Desktop/a.tar.bz2 ...

  6. C# List<Object>值拷贝

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Run ...

  7. PAT Advanced 1077 Kuchiguse (20 分)

    The Japanese language is notorious for its sentence ending particles. Personal preference of such pa ...

  8. TreeView详细用法

    Treeview用于显示按照树形结构进行组织的数据.          Treeview控件中一个树形图由节点(TreeNode)和连接线组成.TtreeNode是TTreeview的基本组成单元. ...

  9. Codeforces 959 树构造 暴力求最小字典序互质序列

    A B C 题目给你一个结论 最少需要min((odd,even)个结点可以把一棵树的全部边连起来 要求你输出两颗树 一棵树结论是正确的 另外一棵结论是正确的 正确结论的树很好造 主要是错误的树 题目 ...

  10. pam模块

    main 循环监控 独立的程序 根据配置防护 登陆 ca cert 私有口令 openssl 证书口令??