bootstrap子页面iframe的modal遮罩问题解决

日期:2017-3-30 16:9:40

作者:ack

访问:2027

一：问题描述

在用bootstrap中页面嵌入了iframe的使用modal的时候遮罩层只会把子页面遮上，没有遮盖父页面如下效果：

我们想要的效果是整个遮住，包括父页面.

二:解决

把modal的div放到父页面在父页面，然后用jquery load加载modal的内容即可

父页面

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" href="css/bootstrap.css" />
    </head>
<body>
	<table width="100%" height="720px" border="1" >
	   <tr>
		<td>
		    <iframe id="iframe1" name="iframe1" src="iframe1.html" width="100%" height="100%"></iframe>
		</td>
		<td>
		     <input type="text" id="textId" value="234" />
		</td>
	    </tr>
	    <tr>
		<td><input type="text" id="textId" value="234" /></td>
		<td>
		     <iframe name="iframe2" src="iframe2.html" width="100%" height="100%"></iframe>
		</td>
	    </tr>
	</table>
	<div class="modal fade" role="dialog" id="ack-modal"></div>
        <script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/bootstrap.js" ></script>
        <script>
	function open(){
		$("#ack-modal").load("model.html", function(){
			$(this).modal('show');
		})
	}
        </script>
	</body>
</html>

子页面1（iframe1）

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
	<div >
	<p>
          fdaaaaaaaaaaaaaaaaaa
	</p>
	<div>
		<button class="btn btn-primary" onclick="add();">新建</button>
	</div>
	</div>
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/bootstrap.js" ></script>
	<script type="text/javascript">
		function add(){
			parent.open();
		}
	</script>
	</body>
</html>

子页面2(iframe2)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="#BCE8F1">
		<div>
			<font color="#449D44" size="4"> 
				fffffffffffffffff
			</font>
		</div>
	</body>
</html>

模态页面(modal)

<!DOCTYPE html>
<html>
 <head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
    <div class="modal-dialog" role="document">
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			<h4 class="modal-title" id="myModalLabel">Modal title</h4>
		</div>
		<div class="modal-body">
			这是模态框
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary">保存</button>
			<button type="button" class="btn btn-default" data-dismiss="modal">
				关闭
			</button>
		</div>
	</div>
    </div>
</body>
</html>