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.

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?

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.

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?

• javascript
• jquery
• css
• twitter-bootstrap
• bootstrap-4

Share Improve this question Follow edited Feb 21, 2020 at 7:33 Robert Newton 1,6111515 silver badges2121 bronze badges asked Oct 16, 2015 at 14:40 QasimRamzanQasimRamzan 39733 silver badges1616 bronze badges 6

• Set position of model using css – Sarjan Desai Commented Oct 16, 2015 at 14:43
• 2 If you want a modal box inside a static div maybe you should use panel instead. getbootstrap./ponents/#panels – Lauwrentius Commented Oct 16, 2015 at 14:48
• yeah i try panels, not working. – QasimRamzan Commented Oct 16, 2015 at 14:53
• What do you mean by "not working"? – ceejayoz Commented Oct 16, 2015 at 15:01
• i mean i tried but didn't work – QasimRamzan Commented Oct 16, 2015 at 15:21

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

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./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare./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.