zoukankan      html  css  js  c++  java
  • bootstrap3-iframe-modal子页面在父页面显示模态框

    本文灵感来自: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();
        });
  • 相关阅读:
    Mysql 5.6 源码编译安装
    Python中的数据类型之字符串
    Python中变量的命名与使用(个人总结)
    Windows环境下python3.7版本怎么安装pygame
    web应用无法访问的原因之一以及如何设置数据库编码
    项目代码设计规范总结之分页查询
    当java web项目部署到服务器上时,无法将图片等媒体文件保存到服务器的最终奥义
    如何查看服务器上打印的信息
    java代码实现JVM栈溢出,堆溢出
    springmvc源码分析(转)
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/7405878.html
Copyright © 2011-2022 走看看