I want to vertically center a modal. I searched a lot on Google but found nothing helpful. Here is my code:
function inactive(id, ths) {
$("#confirmation").modal("show");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade bs-example-modal-sm" id="confirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Are you sure you want to inactivate it?</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" name="captcha" id="cval" placeholder="enter captcha">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="yes">Yes</button>
</div>
</div>
</div>
</div>
How can I center it vertically?
Add . modal-dialog-centered to . modal-dialog to vertically center the modal.
Answer: Use the CSS margin-top Property This solution will dynamically adjust the alignment of the modal and always keep it in the center of the page even if the user resizes the browser window.
Center modal To vertically center the modal dialog, you can use the . uk-margin-auto-vertical class from the Margin component.
To open a modal from another modal can be done simply by using the events that Bootstrap provides such as show. bs. modal . You may also want some CSS to handle the backdrop overlays.
Not tested but you can try this
.yourElement{
position: relative;
top: 50%;
transform: translateY(-50%);
}
There is a specific bootstrap class (v4.1) for this:
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Source: https://getbootstrap.com/docs/4.1/components/modal/#vertically-centered
As it looks as a bootstrap modal, Checkout this Fiddle (jsFiddle).
Try
.modal-dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
}
Hope this helps!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With