Putting bootstrap modal into a div wrapper instead of body

Question

I've been trying to adjust my code so the modal popup will be in a big wrapper but it's not happening like I want it to be.

How it looks like now when the page loads - a popup with a blur overlay

 <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-->

I tried to move the above modal code into the #wrapper but then the whole page will have a blur overlay.

I've been fiddling with the css but I can't seem to get it right.

Here's my whole css file : https://plnkr.co/edit/DP2s6HRgFfrDiT7ws0Se?p=preview

Can someone help me / suggest a solution for this? I inspected the page and "modal-open" class is on the body tag when the popup modal loads into the page on first load

Answer 1

As the documentation says:

Modal markup placement

Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

Maybe this can help you.

Answer 2

This is just a quick glance suggestion. Try to add a higher z-index on the modal so it shows above the blurry background rather than underneath it.