因为项目需要,我需要一个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="#" οnclick=&#