1. 程式人生 > >bootstrap3-iframe-modal子頁面在父頁面顯示模態框

bootstrap3-iframe-modal子頁面在父頁面顯示模態框

rbo 相關 belle 綁定 dism label bsp 打開 win

本文靈感來自:http://www.cnblogs.com/chengxuyuanzhilu/p/5132328.html

子頁面內容

    //打開模態框
    function openMySelectModiaOrPackageModal(){
        var fatherBody = $(window.top.document.body);
        //定義頁面存放模態窗口的元素
        var id = ‘iframeModalPages‘;
        var dialog = $(‘#‘ + id);
        if (dialog.length == 0) {
            dialog 
= $(‘<div class="modal fade" role="dialog" id="‘ + id + ‘">‘+$(‘#mySelectMediaOrPackageModal‘).html()+‘</div>‘); dialog.appendTo(fatherBody); } //加載 dialog.load("model.html", function() { dialog.modal({ backdrop: false }); }); }

子頁面modal

<div class="modal fade bs-example-modal-lg" tabindex="-1" id="mySelectMediaOrPackageModal" role="dialog" aria-labelledby="mySelectMediaOrPackageModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <ul class="nav nav-tabs _yh_modal_content_title">
                    <li class="active">
                        <a href="#mySelectMedia" data-toggle="tab">
                            <h4 class="modal-title" id="mySelectMediaPanel">
                                選擇1
                            
</h4> </a> </li> <li> <a href="#mySelectPackage" data-toggle="tab"> <h4 class="modal-title" id="mySelectPackagePanel"> 選擇2 </h4> </a> </li> </ul> </div> <div class="modal-body"> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="mySelectMedia"> <p>菜鳥教程是一個提供最新的web技術站點,本站免費提供了建站相關的技術文檔,幫助廣大web技術愛好者快速入門並建立自己的網站。菜鳥先飛早入行——學的不僅是技術,更是夢想。</p> </div> <div class="tab-pane fade" id="mySelectPackage"> <p>iOS 是一個由蘋果公司開發和發布的手機操作系統。最初是於 2007 年首次發布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X,它們共享 Darwin 基礎。OS X 操作系統是用在蘋果電腦上,iOS 是蘋果的移動版本。</p> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> 關閉 </button> <button type="button" class="btn btn-primary"> 提交更改 </button> </div> </div> </div> </div>

綁定子頁面觸發按鈕

 $("#_cx_modiaOrPackageS").click(function(){
        openMySelectModiaOrPackageModal();
    });

bootstrap3-iframe-modal子頁面在父頁面顯示模態框