將引導模態放入div封裝而不是身體

我一直在試圖調整我的代碼，所以模態彈出將會在一個大封裝中，但不會像我想要的那樣發生。將引導模態放入div封裝而不是身體

如何，它看起來像現在當頁面加載 - 一個模糊覆蓋

<section id="wrapper"> 
     <div class="logo"> 
      <a href="<?php echo $base_url; ?>index.php"> 
       <img src="assets/images/logo.png" class="img img-responsive"/> 
      </a> 
     </div> 
     <div class="fat-nav"> 
      <div class="fat-nav__wrapper"> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li><a href="#">Help</a></li> 
        <?php if(isset($_SESSION['login']) && $_SESSION['login'] == true) : ?> 
         <li><a href="<?php echo $base_url;?>logout.php">Logout</a></li> 
        <?php endif; ?> 
       </ul> 
      </div> 
     </div> 
     <div class="content"> 
      <div class="container master-container"> 
       <div class="back-top-right"></div> 
        <div class="square-container"></div><!-- /.square-container --> 
       <div class="back-bottom-left"></div> 
      <div class="clearfix"></div> 
      </div><!-- /.col-sm-12 --> 
     </div><!-- /.content --> 

     <div class="footer"> 
      <img src="assets/images/24.png" /> 
      COPYRIGHT 2017 SUNWAY GROUP 
     </div><!-- /.footer --> 
     <div class="clearfix"></div> 

     <div id="bx"> 
      <div class="side-buttons"> 
       <a href="#" class="btn btn-default text-uppercase"> 
        <span class="changeMe"> 
         <?php 
          echo count($user['Pledges']).'/'.$number_of_square; 
         ?> 
        </span> <br /> 
        <small>Pieces Revealed</small> 
       </a> 
       <a href="<?php echo $base_url; ?>pledge.php?new=1" class="btn btn-default text-uppercase"> 
        Pledge 
        &nbsp;&nbsp;<img src="assets/images/23.png" height="20" style="margin-top: -2px;"> 
       </a> 
      </div><!-- /.side-buttons --> 
     </div><!-- /#bx --> 

    </section><!-- /#wrapper --> 

    //////////MODAL below///////// 

    <!-- Modal --> 
    <div id="welcome" class="modal fade welcome" role="dialog"> 
     <div class="modal-dialog"> 
      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-body"> 
        <h1 class="text-center"> 
         Unlock the Artwork with Your Words. 
        </h1> 
        <p class="text-center"> 
         Select which tile of the artwork to unveil your pledge, and view pledges from others by browsing through the tiles. 
        </p> 
       </div> 
       <div class="modal-footer"> 
        <div class="button-container"> 
         <a href="<?php echo $base_url;?>pledge.php" class="btn btn-default text-uppercase"> 
          Continue 
          &nbsp;&nbsp;<img src="assets/images/23.png" height="20" style="margin-top: -2px;"> 
         </a> 
        </div> 
       </div> 
      </div><!-- /.modal-content --> 
     </div><!-- /.modal-dailog --> 
    </div><!-- /#welcome /.welcome--> 

    <!-- Modal --> 
    <div id="thePledge" class="modal fade thePledge" role="dialog"> 
     <div class="modal-dialog"> 
      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-body"> 
        <div class="modal-close-button"> 
         <button class="btn btn-default" data-dismiss="modal"> 
          <span class="glyphicon glyphicon-remove"></span> 
         </button> 
        </div><!-- /.modal-close-button --> 
        <div class="col-sm-12"> 
         <div class="back-top-left"></div> 
         <span> 
          <?php 
           $fb_id = 0; 
           if(isset($_SESSION['fb_uid'])){ 
            $fb_uid = $_SESSION['fb_uid']; 
           } 
          ?> 
          <img src=' 
          <?php echo ($fb_uid > 0) ? "https://graph.facebook.com/{$fb_uid}/picture?type=large" : "assets/images/12.png"; ?> 
         ' style="max-width:129px;" class="user-img"> 
         </span> 
         <span class="text-head"> 
          <?php 
           $fb_first_name = $fb_last_name = ''; 
           if(isset($_SESSION['first_name'])){ 
            echo $_SESSION['first_name'] . ' ' .$_SESSION['last_name']; 
           }else{ 
            echo 'UnKnown'; 
           } 
          ?>: 
         </span> 
         <br><br> 
        </div><!-- /.col-sm-12 --> 
        <div class="col-sm-12 "> 
         <p class="set-content">I pledge to be champion of clean air and help keep Sunway Pyramid smoke-free. I will also be respectful of the responsible smokers who smoke in the designted areas.</p> 
        </div><!-- /.col-sm-12 --> 
       </div><!-- /.modal-body --> 
       <div class="modal-footer"> 
        <div class="back-bottom-right"></div> 
        <div class="button-container"> 
         <div class="pull-right"> 
          <a href="#" class="sharing "> 
           <img src="assets/images/26.png" /> 
          </a> 
          <span class="group-social"> 
           <a href="#" class="facebook animated"> 
            <img src="assets/images/facebook.png" /> 
           </a> 
           <a href="#" class="message animated"> 
            <img src="assets/images/message.png" /> 
           </a> 
          </span> 
         </div><!-- /.pull-right --> 
         <div class="clearfix"></div> 
        </div> 
       </div> 
      </div><!-- /.modal-content --> 
     </div><!-- /.modal-dailog --> 
    </div><!-- /#thePledge /.thePledge-->

一個彈出我嘗試上述模式的代碼移動到#wrapper指定卻對整個頁面會有一個模糊覆蓋。

我一直在擺弄CSS，但我似乎無法做到正確。

這是我整個的CSS文件：https://plnkr.co/edit/DP2s6HRgFfrDiT7ws0Se?p=preview

有人可以幫助我/提示了一個解決方案？我檢查了頁面，當彈出窗口模式加載到第一次加載時頁面上的「模態打開」類位於body標籤上

來源

2017-03-02 rory-h