首页 > Windows开发 > 详细

用Bootstrap框架弹出iframe页面 在弹出的模态框中载人iframe页面,bootstrapiframe

时间:2015-04-07 15:12:34      阅读:253      评论:0      收藏:0      [点我收藏+]

HTML代码:

<div class="modal fade" id="NoPermissionModal">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <%-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>--%>
                <button type="button" class="close" onclick="window.history.go(-1);">×</button>
                <h4 class="modal-title" id="NoPermissionModalLabel">系统消息</h4>
            </div>
            <div class="modal-body">
                <iframe id="NoPermissioniframe" width="100%" height="50%" frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
<%--                <button type="button" class="btn btn-default " data-dismiss="modal">    关  闭    </button>--%>
                <button class="btn btn-default"  type="button" onclick="window.history.go(-1);" >    关  闭    </button>
            </div>
        </div>
    </div>
</div>
 
 <input type="button" value="弹出模态框iframe" class="btn btn-primary" id="btnclick" ><img src="http://img.blog.csdn.net/20140923180316546?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpbmFwbGFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast"  />

 

Js代码:

$(function(){
    $("#btnclick").click(function(){
        var frameSrc = "../ErrorPages/NoPermission.html";
        $("#NoPermissioniframe").attr("src", frameSrc);
        $(‘#NoPermissionModal‘).modal({ show: true, backdrop: ‘static‘ });
    });
});

iframe中嵌入一个jsp页面,需要在iframe中弹出一个div层,可是这个div不可以超出iframe的范围

 

思路:
把div层定义在父窗口中,弹出div功能定义为一个方法popupDiv;在iframe页面调用父窗口的方法:
window.parent.popupDiv()。
 

iframe中嵌入一个jsp页面,需要在iframe中弹出一个div层,可是这个div不可以超出iframe的范围 你问题解决了

 

iframe中的弹出层无法弹到外面去的。

要实现这种弹出层,只有一种思路,就是把你要弹出的内容传递到主框架中,然后在主框架里弹出。
 转载自:http://www.bkjia.com/webzh/883250.html

用Bootstrap框架弹出iframe页面 在弹出的模态框中载人iframe页面,bootstrapiframe

原文:http://www.cnblogs.com/JD-XIAOMEI/p/4398344.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!