需要2个页面,1个主页面(用的bootstrat框架)
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框(Modal)标题
</h4>
</div>
<iframe src="iframe.html" id="iframe"></iframe>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
</div>
</div>
</div>
</div>
1个iframe页面
<form>
<input type='text' />
<input type="check" />
<input id="sub1" type="submit" value="提交" />
</form>
<script type="text/javascript">
$(function(){
$('#sub1').click(function(){
$('#myModal', parent.document).css('display','none');
$('.modal-backdrop', parent.document).css('display','none');
});
})
</script>
/*ps:
- 记得引入jQuery框架
- parent.document是获取iframe元素的父级页面的元素,前面的是父级页面的元素(id或者class)
- 框架内页面不能跨域*/