Home >Web Front-end >HTML Tutorial >Use the Bootstrap framework to pop up the iframe page and load the iframe page in the pop-up modal box_html/css_WEB-ITnose

Use the Bootstrap framework to pop up the iframe page and load the iframe page in the pop-up modal box_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:57:193151browse

HTML code:

<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" alt="" />

Js code:

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


Rendering:









Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn