QasimRamzan QasimRamzan - 2 months ago 7
CSS Question

How to show bootstrap v4 model box inside a container div?

Working with the bootstrap v4.0.0-alpha is pretty awesome, here what I am looking for: I need to put modal box inside the container div, not on whole screen. enter image description here

I tried with changing some builtin CSS classes and yeah some JavaScript :) like:


z-index: 1051;


Changing in right navBar but not satisfy with that is there, any simple solution?

Answer
  1. Create a variable var mod and load modal in it;

    var mod = $('.modal');
    
  2. Create a div <div class="insidemodal"></div> inside container where you want to show the modal

  3. Use Bootstrap 4 modal event listener, preferable show.bs.modal and put var mod = $('.modal'); inside it and load the modal in insidemodal selector when modal about to show.

    $('#myModal').on('show.bs.modal', function () {
        var mod = $('.modal'); //Create variable and load modal in it
        $('.insidemodal').html(mod); //Load modal to `insidemodal` Selector
    });
    
  4. Make following Changes in Modal CSS

    .modal-backdrop {
        display:none //<---Kill the modal backdrop
    }
    .modal-backdrop.in {
        opacity: 0;
    }
    .modal {
        z-index: inherit !important; //<--overwrite modal default z-index: 1050
        position: relative; //<change position from absoulte
    }
    

So Final Code will be

JS

$(document).ready(function () {
    $('#myModal').on('show.bs.modal', function () {
        var mod = $('.modal'); 
        $('.insidemodal').html(mod);
    });
});

CSS

.title {
    background: green;
    color:#fff;
    padding: 5px;
    text-align:center;
    border:1px solid;
}
.menu {
    background: blue;
    color:#fff;
    padding: 5px;
    text-align:center;
    border:1px solid;
}
.insidemodal {
    background: red;
    border:1px solid;
    padding: 5px;
}
.modal-backdrop {
    display:none
}
.modal-backdrop.in {
    opacity: 0;
}
.modal {
    z-index: inherit !important;
    position: relative;
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="title">This Is Title</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="menu">Left Menu
                <br>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="insidemodal"></div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span>
 <span class="sr-only">Close</span>

                </button>
                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>
            <div class="modal-body">...</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Working Fiddle Example

SideNote If you have multiple modals, Above CSS changes in Modal CSS can cause other modals to not behave properly, so use custom selector instead making changes in default modal selector.