因为项目需要，我需要一个iframe嵌套一个弹出的窗口，使得父窗口不能点击；需要一个弹出一个div区域来进行对一些内容的修改，花了一天时间实现了这些效果。
html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="../../static/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="../../static/css/bootstrap.min.css" />
<script type="text/javascript" src="../../static/js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="../../static/js/bootstrap.min.js"></script>
<script src="../../staticjs/jquery-1.8.3.js"></script>
</head>
<style type="text/css">
#a1 {
color: white;
}
.btn-color {
color: #fff;
background-color: #3892d3;
border-color: #46b8da;
}
#div1 {
display: none;
position: absolute;
left: 40%;
top: 30%;
width: 400px;
height: 200px;
border: 1px solid #9D9D9D;
background: white;
text-align: center;
}
#open {
position: absolute;
top: 40%;
background-color: #C0C0C0;
left: 40%;
width: 100px;
height: 50px;
}
/*关闭按钮*/
#HCloseBtn{width:24px;height:24px;line-height:24px;display:inline-block;cursor:pointer;background-color:#ccc;color:#fff;font-size:1.4em;text-align:center;position:absolute;top:8px;right:8px;}
</style>
<body class="container">
<div style="border: 1px solid #E0E0E0; border-radius: 10px; ">
<div style="border-top: 1px solid #E3E3E3;">
<table class="table table-striped table-hover">
<tr>
<th>进度</th>
<th>存储容量</th>
</tr>
<tr>
<td>
<progress value="30" max="100" style="width: 100px; ">
</progress>30%
</td>
<td>
<button class="btn-color" ">浏览</button>
<a class="open " href="#" onclick="OpenDiv() " >
<span class="glyphicon glyphicon-pencil " aria-hidden="true ">
</span>
</a>
</td>
</tr>
<tr>
<td>
<progress value="30 " max="100 " style="width: 100px; ">
</progress>30%
</td>
<td>
<button class="btn-color " ">浏览</button>
<a class="open " href="# " onclick="OpenDiv() ">
<span class="glyphicon glyphicon-pencil " aria-hidden="true ">
</span>
</a>
</td>
</tr>
</table>
</div>
<!-- iframe-->
<div id="HBox">
</div>
<!--弹出编辑框-->
<div id="div1">
<a style="float: right; " href="javascript:CloseDiv();">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
<h3>修改文件夹信息</h3>
<form class="form-horizontal">
<input type="hidden" id="hideId" name="" value="id01">
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label">文件夹名称</label>
<div class="col-sm-6">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label">文件夹名称</label>
<div class="col-sm-6">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
</div>
</body>
<!--iframe插件的显示，只能放在上传文件的下面-->
<script type="text/javascript" src="../../static/js/datamanage.js"></script>
</html>
datamanage.js
/**
+-------------------------------------------------------------------
* jQuery hDialog - 多功能弹出层插件
+-------------------------------------------------------------------
* @version 2.0.4
* @author haibao <[email protected]> <http://www.hehaibao.com/>
* github [https://github.com/hehaibao/hDialog]
* MIT
+-------------------------------------------------------------------
*/
(function(c) {
"function" === typeof define && define.amd ? define(["jquery"], c) : c(window.jQuery || window.Zepto)
})(function(c, v) {
var m = c(document),
n = c(window),
u = c("body"),
f, p = null,
d = {
op: {},
version: "2.0.4",
init: function(a) {
return this.each(function() {
f = c(this);
var b = null;
b = c.extend({}, {
title: "",
box: "#HBox",
boxBg: "#ffffff",
modalBg: "rgba(0,0,0,0.5)",
width: 300,
height: 270,
positions: "center",
effect: "zoomOut",
hideTime: 0,
modalHide: !0,
isOverlay: !0,
escHide: !0,
autoShow: !1,
autoHide: !1,
types: 1,
iframeSrc: "",
iframeId: "iframeHBox",
beforeShow: function() {},
afterHide: function() {}
}, a);
if(b.autoShow) d.op = b, d.open();
else f.off("click").on("click", function(a) {
d.op = b;
d.open()
});
b.autoHide && d.close()
})
},
open: function() {
d.checkBrowserVersion() && (this.op.modalBg = "#000000", alert("\u7cfb\u7edf\u68c0\u6d4b\u5230\u60a8\u6b63\u5728\u4f7f\u7528ie8\u4ee5\u4e0b\u5185\u6838\u7684\u6d4f\u89c8\u5668\uff0c\u4e0d\u80fd\u5b9e\u73b0\u5b8c\u7f8e\u4f53\u9a8c\uff0c\u8bf7\u53ca\u65f6\u66f4\u65b0\u6d4f\u89c8\u5668\u7248\u672c\uff01"));
var a = this.op,
b = "",
q = "",
r = "",
t = a.autoShow ? f : c(a.box);
var e = parseInt(a.width);
var g = parseInt(a.height);
var h = "" + parseInt(-(g / 2)) + "px 0 0 " + parseInt(-(e / 2)) + "px";
a.beforeShow && this.fire.call(this, a.beforeShow);
switch(a.positions) {
case "top":
var k = 0;
var l = "50%";
h = "0 0 0 " + parseInt(-(e / 2)) + "px";
break;
case "left":
k = l = h = 0;
break;
case "bottom":
k = parseInt(n.height() - g) + "px";
l = parseInt(n.width() - e) + "px";
h = 0;
break;
default:
k = l = "50%"
}
a.isOverlay && !c("#HOverlay").length && (q = "<div id='HOverlay' style='width:" + m.width() + "px;height:" +
m.height() + "px;background-color:" + a.modalBg + ";position:fixed;top:0;left:0;z-index:9999;'></div>");
"" == a.title || c("#HTitle").length || (b = '<div id="HTitle">' + a.title + "</div>");
b += '<a id="HCloseBtn" title="\u5173\u95ed"><span>×</span></a>';
2 == a.types && "" != a.iframeSrc && (r = '<iframe id="' + a.iframeId + '" width="' + e + '" height="' + g + '" frameborder="0" scrolling="auto" src="' + a.iframeSrc + '"></iframe>');
u.stop().append(q).find(t).css({
backgroundColor: a.boxBg,
position: "fixed",
top: k,
left: l,
zIndex: 999999,
margin: h,
width: e,
height: g
}).removeAttr("class").addClass("animated " + f.attr("class")).prepend(b + r).show();
t.modalHide ? c("#HOverlay, #HCloseBtn") : c("#HCloseBtn").off("click").on("click", function() {
d.close()
});
0 != a.hideTime && (p = setTimeout(function() {
d.close()
}, parseInt(a.hideTime)));
a.escHide && m.off("keyup").on("keyup", function(a) {
a = a || window.event;
27 === (a.keyCode ? a.keyCode : a.which ? a.which : a.charCode) && d.close()
})
},
close: function() {
var a = this,
b = a.op,
d = c(b.box);
clearTimeout(p);
d.is(":visible") && (d.removeAttr("class").addClass("animated " +
b.effect), d.hasClass(b.effect) && setTimeout(function() {
d.removeAttr("style").hide()
}, 300), c("#HOverlay, #HTitle, #" + b.iframeId).remove(), setTimeout(function() {
b.afterHide && a.fire.call(a, b.afterHide)
}, 310))
},
fire: function(a, b) {
if(c.isFunction(a)) return a.call(this, b)
},
checkBrowserVersion: function() {
var a = navigator.userAgent.toLowerCase(),
b = !1; - 1 < a.indexOf("msie") && (a = a.match(/msie ([\d.]+)/)[1], b = 8 >= parseInt(a) ? !0 : !1);
return b
}
};
c.fn.hDialog = function(a) {
return d[a] ? d[a].apply(this, Array.prototype.slice.call(arguments,
1)) : "object" !== typeof a && a ? (c.error("Error! Method" + a + "does not exist on jQuery.hDialog\uff01"), this) : d.init.apply(this, arguments)
}
});
//浏览
$(function() {
//iframe
$('.btn-color').hDialog({
types: 2,
iframeSrc: 'second.html',
iframeId: 'iframeHBox',
width: 800,
height: 600
});
});
//编辑文件名
function OpenDiv( ) {
document.getElementById("hideId").value="传递的文件夹主键"
document.getElementById("div1").style.display = "block";
document.getElementById("open").style.display = "none";
}
/*
给div层中的关闭添加onclick事件：*/
function CloseDiv() {
document.getElementById("div1").style.display = "none";
document.getElementById("open").style.display = "block";
}