pwiz pwiz - 20 days ago 6
CSS Question

Bootstrap 3 Modal Position

I am having problems positioning the modal window in the center of the window. It is showing the position in the right side.What am I missing, this appears to be a CSS problem that I am unable to solve? Thanks for your suggestions!

<!--////////// MODAL WINDOW EXAMPLE //////////-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">I am a modal window, and no one can beat me!</h4>
</div>
<div class="modal-body">

<!-- Columns within the modal window -->
<div class="row">
<div class="col-md-3">
<img src="images/icons/dynamite.svg" alt="" />
</div>

<div class="col-md-9">
<p class="lead">This is a test modal!</p>
</div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, omnis, sunt illum et minima facilis rerum eaque ullam quasi aperiam soluta beatae vero atque pariatur ab ad temporibus accusamus necessitatibus.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close Window</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!--////////// MODAL WINDOW EXAMPLE //////////-->


And the CSS:

.modal-backdrop {
z-index: 1030;
background-color: #243342;
}

.modal-backdrop.in {
opacity: .95;
filter: alpha(opacity=95);
}

.modal {
z-index: 1040;
}

.modal-dialog {
z-index: 1050;
}

.modal-content {
width: 624px;
background-color: #f9fafb;
border: 2px solid #ebedef;
border-radius: 7px;
-webkit-background-clip: border-box;
-moz-background-clip: border-box;
background-clip: border-box;
-webkit-box-shadow: -14px 14px 0 0 rgba(0,0,0,0.35);
box-shadow: -14px 14px 0 0 rgba(0,0,0,0.35);
}

@media (max-width: 767px) {
.modal-content {
width: auto;
}
}

@media (max-width: 480px) {
.modal-content {
-webkit-box-shadow: none;
box-shadow: none;
}
}

.modal-header {
padding: 17px 19px 15px 24px;
border-bottom: 1px solid #ebedef;
}

.modal-header .close {
margin: 5px 0 0;
padding: 0;
font-size: 18px;
line-height: 1;
color: #34495e;
}

.modal-title {
margin: 0;
font-size: 24px;
line-height: 30px;
}

.modal-body {
padding: 20px 24px;
}

.modal-body p {
font-size: 16px;
line-height: 1.625;
}

.modal-footer {
padding: 19px 22px 20px;
margin-top: 0;
background-color: #ebedef;
border-top: none;
border-radius: 0 0 7px 7px;
}

.modal-footer .btn + .btn {
margin-left: 12px;
}

@media (max-width: 480px) {
.modal-footer .btn {
display: block;
min-width: auto;
margin-bottom: 15px;
}

.modal-footer .btn:last-child {
margin-bottom: 0;
}

.modal-footer .btn + .btn {
margin-left: 0;
}
}

@media screen and (min-width: 768px) {
.modal-dialog {
left: 50%;
right: auto;
width: 624px;
}
}

Answer
@media screen and (min-width: 768px) {
    .modal-dialog {
        left: 50%;
        right: auto;
        width: 624px;
    }
}

If you want a set window on a center you must use this style:

.modal-dialog{
position: absolute;
left: 50%;
//now you must set a margin left under zero - value is a half width your window
margin-left: -312px;
// this same situation is with height - example
height: 500px;
top: 50%;
margin-top: -250px;
} 
Comments