bootstarp後臺界面iframe模態框遮罩問題

問題如下圖：

模態框代碼寫在子頁面中才會出現這種情況，因爲iframe中的模態框只顯示在iframe區域。其實百度看了一些解決方法感覺挺麻煩的，自己想了下發現其實可以很簡單的解決。

思路：frame中的模態框只顯示在iframe區域 =》讓frame區域覆蓋整個頁面 =》導航和側邊菜單使用定位 =》默認情況下frame區域（position: relative）的z-index值小於導航和側邊菜單的z-index值=》模態框顯示時只要讓frame區域的z-index大於導航和側邊菜單的z-index值便可 =》模態框隱藏時恢復默認z-index值

上代碼：

html：

<div id="wrapper">
        <!--頭部導航和側邊菜單-->
        <nav class="navbar">
            <!--頭部導航-->
            <div class="nav">
            </div>
            <!--/頭部導航-->
            <!--側邊菜單-->
            <div class="sidebar">
                <div class="sidebar-nav">
                    <ul class="nav">
                        <li><a href="#">菜單</a></li>
                        <li><a href="#">菜單</a></li>
                        <li><a href="#">菜單</a></li>
                        <li><a href="#">菜單</a></li>
                    </ul>
                </div>
            </div>
            <!--/側邊菜單-->
        </nav>
        <!--/頭部導航和側邊菜單-->
        <!--iframe-->
        <iframe id="mainIframe" src="index/index.html" frameborder="0" scrolling="auto">
           
        </iframe>
        <!--/iframe-->
    </div>

css：

.navbar{
    min-height: 60px;
    font-size: 14px;
    background: #438eb9;
    position: absolute;
    width: 100%;
    z-index: 1000;
}
.sidebar{
position: absolute;
    width: 200px;
    margin-top: 60px;
}
#mainIframe {
    width: 100%;
    position: relative;
    z-index:100
}

還有注意的是爲了不讓導航和側邊菜單遮到iframe的內容，所以要設置iframe頁面中的body的padding值：

body {
    padding: 60px 0 0 200px;
}

js:

以下代碼我是放在所有iframe頁面都會引用的一個公共js文件中：

$('.modal').on('show.bs.modal',function(){
    window.parent.$('#mainIframe').css('z-index',99999);
  })
  $('.modal').on('hidden.bs.modal',function(){
    window.parent.$('#mainIframe').css('z-index',100);
  })

完成！！！