Grcn Grcn - 1 year ago 209
jQuery Question

Bootstrap Modal Position issue

I want to divide the screen as left menu and main menu with Bootstrap.

Left Menu will be "col-md-2" and Main Menu will be "col-md-10" and I'd like to make main menu as a overlay screen.

For this reason, I am using bootstrap modal. As you can see in my below code:

1-) I cannot use "col-md-xx" class into Modal class

2-) If I set the 80% width to class="modal-dialog", it is nearly working but left position is being wrong

3-) Therefore, I am setting the modal position with jQuery but it is still now working properly.

I know that it is very diffucult to explain but if you check the below code I suppose you will understand the situation.

Do you have any suggestion to fix this issue?

Thanks in advance.

<html lang="en">

<meta charset="utf-8">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
#mainmenu {
border-style: solid;

var aa = 1;
$(document).ready(function () {
backdrop: 'static'

left: $("#mainmenu").position().left // (if I add to "-150" end of this line it will be ok but I cannot set hardcoded number)

<div class="row">
<div id="leftmenu" class="col-md-2">Left Menu</div>
<div id="mainmenu" class="col-md-10">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div id="myModal2" class="modal-dialog" style="width:80%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
<div class="modal-body">
<p>Some text in the modal.</p>
<button type="button" class="btn btn-info btn-lg" id="myBtn2">Open Modal2</button>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>


Answer Source

Try this:


.left-zero {
    margin-left: 0 !important;

Change into HTML:

<div id="myModal2" class="modal-dialog left-zero">