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

叁歲伎倆 2022-08-12 10:29 219阅读 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="https://img-blog.csdn.net/20140923180316546?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpbmFwbGFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

## Js代码： ##

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

## 效果图： ##

![SouthEast][]

[SouthEast]: /images/20220810/1d364848888e416db8fea6db6d139470.png

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular6 弹出模态框 ngx-bootstrap

首先下载ngx-bootstrap npm install ngx-bootstrap --save 然后如果需要加载 bootstrap 样式，还需要下载 bootstr

淡淡的烟草味﹌/ 2023年06月22日 05:28/ 0 赞/ 3 阅读

相关 bootstrap弹出框

要想使用Bootstrap Popover（弹出框）则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦)

约定不等于承诺〃/ 2022年08月23日 14:00/ 0 赞/ 365 阅读

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

HTML代码： <div class="modal fade" id="NoPermissionModal"> <div class=

叁歲伎倆/ 2022年08月12日 10:29/ 0 赞/ 220 阅读

相关 bootstrap modal 弹出其他页面

1、不使用js 方式 1.1 按钮 <a class=" btn default" href="ui_modals_ajax_sample.html" data-t

心已赠人/ 2022年08月05日 08:56/ 0 赞/ 227 阅读

相关 JSP/HTML页面弹出框

需求：项目中要求点击某个按钮，弹出一个对话框，输入数据，提交。首先来分析一下，在A页面输入N多数据，然后点击提交按钮，弹出一个新的对话框B，对话框B里也要输入N多数据，在

怼烎@/ 2022年07月15日 14:54/ 0 赞/ 324 阅读

相关自定义弹出模态框

<style > \msgbox \{ width: 5 rem; height: 1 rem; line-height: 1

太过爱你忘了你带给我的痛/ 2022年06月18日 10:59/ 0 赞/ 422 阅读

相关关于弹出层(iframe)时刷新页面的js

https://blog.csdn.net/arui\_email/article/details/8490064 \[javascript\] [view plain][

深碍√TFBOYSˉ_/ 2022年05月25日 04:44/ 0 赞/ 179 阅读

相关《layUI的iframe弹出层的父子页面数据交互》

当layer以iframe层的方式弹出新的窗口（子页面），如何在子页面中访问父页面的元素和函数。 1.获取父页面的值给子页面 var body = layer.ge

ゝ一世哀愁。/ 2022年04月05日 04:49/ 0 赞/ 606 阅读

相关 bootstrap weebox，支持ajax的模态弹出框

本篇介绍的bootstrap weebox（支持ajax的模态弹出框），历经多次修改，目前版本已经稳定，整合了bootstrap的响应式，界面简单，功能却无比丰富，支持ajax

逃离我推掉我的手/ 2021年09月10日 14:48/ 0 赞/ 432 阅读

相关 bootstrap中的模态框（modal，弹出层）

`bootstrap`中的模态框（`modal`），不同于`Tooltips`，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。务必将模态框的 HTML 代码放在

女爷i/ 2021年06月26日 16:06/ 0 赞/ 663 阅读