Grcn Grcn - 6 months ago 66
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">

<head>
<title>-</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#leftmenu,
#mainmenu {
border-style: solid;
}
</style>

<script>
var aa = 1;
$(document).ready(function () {
$("#myModal").modal({
backdrop: 'static'
});

$("#myModal2").width($("#mainmenu").width());
$("#myModal2").offset({
left: $("#mainmenu").position().left // (if I add to "-150" end of this line it will be ok but I cannot set hardcoded number)
})
});
</script>
</head>

<body>
<div class="row">
<div id="leftmenu" class="col-md-2">Left Menu</div>
<div id="mainmenu" class="col-md-10">
Main
<!-- 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>
<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>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

</html>

Answer

Try this:

CSS:

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

Change into HTML:

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