jQuery modal not setting horizontally middle - html

Question

I have a simple jQuery modal. It works well, but I can't set it horizontally middle. I've tried many approach, but it not centering anyway. It creates problem when I want to use "max-width: 400". It create problem and go on one side. I want to make it like bootstrap modal. Max-width: 400 and will be centered horizontally also. Please look at my code.
// common close button
$('.mi-modal-toggle').click(function() {
$(this).closest(".mi-modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.mi-modal-toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
$(`.mi-modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
.mi-modal {
position: fixed;
z-index: 10000; /* 1 */
top: 0;
left: 0;
visibility: hidden;
height: 100%;
box-sizing: border-box;
padding: 10%;
width: 80%; /* 94% + 3% +3% = 100% */
max-width: 400px;
}
.mi-modal.modal-visible {
visibility: visible;
}
.mi-modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.4);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.3s, opacity 0.3s;
box-sizing: border-box;
}
.mi-modal.modal-visible .mi-modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 3em;
width: 100%;
background-color: #fff;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
margin: auto auto !important;
}
.mi-modal-transition {
transition: all 0.4s;
transform: translateY(-10%);
opacity: 0;
}
.mi-modal.modal-visible .mi-modal-transition {
transform: translateY(0);
opacity: 1;
}
.mi-modal-header,
.mi-modal-content {
padding: 1em;
}
.mi-modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
position: relative;
background-color: #fff;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
border-bottom: 1px solid #e8e8e8;
}
.mi-modal-close {
margin: -0.5rem -0.5rem -0.5rem auto;
color: #aaa;
background: #edcfa5;
border: 0;
font-size: 20px;
font-weight: 700;
position: absoloute;
box-sizing: content-box;
width: 1em;
height: 1em;
padding: 0.3em;
color: #000;
border: 0;
border-radius: 0.25rem;
opacity: .5;
}
.mi-modal-close:hover {
color: #777;
}
.mi-modal-heading {
font-size: 1.125em;
margin: 0px 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mi-modal-content>*:first-child {
margin-top: 0;
}
.mi-modal-content>*:last-child {
margin-bottom: 0;
}
.mi-modal.modal-scroll .mi-modal-content {
max-height: 60vh;
overflow-y: scroll;
}
.mi-modal.modal-scroll .mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 2em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #CDf;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
}
.modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center; /* justify-content: flex-end; */
padding: 0.75rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer>* {
margin: 0.25rem;
}
<button class="mi-modal-toggle" data-modal-id="modal1">Show modal</button>
<div class="mi-modal" data-modal-id="modal1">
<div class="mi-modal-overlay mi-modal-toggle"></div>
<div class="mi-modal-wrapper mi-modal-transition">
<div class="mi-modal-header">
<h2 class="mi-modal-heading">This is a modal</h2>
<button class="mi-modal-close mi-modal-toggle">×</button>
</div>
<div class="mi-modal-body">
<div class="mi-modal-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>
</div>
</div>
<div class="modal-footer">
<button class="mi-btn btn-danger mi-ripple mi-ripple-light mi-modal-toggle">No</button>
<button class="mi-btn btn-info mi-ripple mi-ripple-light">Confirm</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Instead of wrestling with margin and padding for centering, just use the standard left position and -50% x-axis translation.
// common close button
$('.mi-modal-toggle').click(function() {
$(this).closest(".mi-modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.mi-modal-toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
$(`.mi-modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
html,
body {
margin: 0;
padding: 0;
}
.mi-modal {
position: fixed;
z-index: 10000;
top: 0;
visibility: hidden;
height: 100%;
box-sizing: border-box;
width: 100%;
}
.mi-modal.modal-visible {
visibility: visible;
}
.mi-modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.4);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.3s, opacity 0.3s;
box-sizing: border-box;
}
.mi-modal.modal-visible .mi-modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 3em;
width: 100%;
max-width: 400px;
background-color: #fff;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
left: 50%;
transform: translateX(-50%);
}
.mi-modal-transition {
transition: all 0.4s;
transform: translate(-50%, -10%);
opacity: 0;
}
.mi-modal.modal-visible .mi-modal-transition {
transform: translate(-50%, 0);
opacity: 1;
}
.mi-modal-header,
.mi-modal-content {
padding: 1em;
}
.mi-modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
position: relative;
background-color: #fff;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
border-bottom: 1px solid #e8e8e8;
}
.mi-modal-close {
margin: -0.5rem -0.5rem -0.5rem auto;
color: #aaa;
background: #edcfa5;
border: 0;
font-size: 20px;
font-weight: 700;
position: absoloute;
box-sizing: content-box;
width: 1em;
height: 1em;
padding: 0.3em;
color: #000;
border: 0;
border-radius: 0.25rem;
opacity: .5;
}
.mi-modal-close:hover {
color: #777;
}
.mi-modal-heading {
font-size: 1.125em;
margin: 0px 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mi-modal-content>*:first-child {
margin-top: 0;
}
.mi-modal-content>*:last-child {
margin-bottom: 0;
}
.mi-modal.modal-scroll .mi-modal-content {
max-height: 60vh;
overflow-y: scroll;
}
.mi-modal.modal-scroll .mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 2em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #CDf;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
}
.modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center;
/* justify-content: flex-end; */
padding: 0.75rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer>* {
margin: 0.25rem;
}
<button class="mi-modal-toggle" data-modal-id="modal1">Show modal</button>
<div class="mi-modal" data-modal-id="modal1">
<div class="mi-modal-overlay mi-modal-toggle"></div>
<div class="mi-modal-wrapper mi-modal-transition">
<div class="mi-modal-header">
<h2 class="mi-modal-heading">This is a modal</h2>
<button class="mi-modal-close mi-modal-toggle">×</button>
</div>
<div class="mi-modal-body">
<div class="mi-modal-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>
</div>
</div>
<div class="modal-footer">
<button class="mi-btn btn-danger mi-ripple mi-ripple-light mi-modal-toggle">No</button>
<button class="mi-btn btn-info mi-ripple mi-ripple-light">Confirm</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

For center alignment of modal add the following css code
.mi-modal.modal-visible {
margin: auto;
inset: 0;
}
.mi-modal-wrapper.mi-modal-transition {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
}
// common close button
$('.mi-modal-toggle').click(function() {
$(this).closest(".mi-modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.mi-modal-toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
$(`.mi-modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
.mi-modal {
position: fixed;
z-index: 10000; /* 1 */
top: 0;
left: 0;
visibility: hidden;
height: 100%;
box-sizing: border-box;
padding: 10%;
width: 80%; /* 94% + 3% +3% = 100% */
max-width: 400px;
}
.mi-modal.modal-visible {
visibility: visible;
}
.mi-modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.4);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.3s, opacity 0.3s;
box-sizing: border-box;
}
.mi-modal.modal-visible .mi-modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 3em;
width: 100%;
background-color: #fff;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
margin: auto auto !important;
}
.mi-modal-transition {
transition: all 0.4s;
transform: translateY(-10%);
opacity: 0;
}
.mi-modal.modal-visible .mi-modal-transition {
transform: translateY(0);
opacity: 1;
}
.mi-modal-header,
.mi-modal-content {
padding: 1em;
}
.mi-modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
position: relative;
background-color: #fff;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
border-bottom: 1px solid #e8e8e8;
}
.mi-modal-close {
margin: -0.5rem -0.5rem -0.5rem auto;
color: #aaa;
background: #edcfa5;
border: 0;
font-size: 20px;
font-weight: 700;
position: absoloute;
box-sizing: content-box;
width: 1em;
height: 1em;
padding: 0.3em;
color: #000;
border: 0;
border-radius: 0.25rem;
opacity: .5;
}
.mi-modal-close:hover {
color: #777;
}
.mi-modal-heading {
font-size: 1.125em;
margin: 0px 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mi-modal-content>*:first-child {
margin-top: 0;
}
.mi-modal-content>*:last-child {
margin-bottom: 0;
}
.mi-modal.modal-scroll .mi-modal-content {
max-height: 60vh;
overflow-y: scroll;
}
.mi-modal.modal-scroll .mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 2em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #CDf;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
}
.modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center; /* justify-content: flex-end; */
padding: 0.75rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer>* {
margin: 0.25rem;
}
.mi-modal.modal-visible {
margin: auto;
inset: 0;
}
.mi-modal-wrapper.mi-modal-transition {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
}
<button class="mi-modal-toggle" data-modal-id="modal1">Show modal</button>
<div class="mi-modal" data-modal-id="modal1">
<div class="mi-modal-overlay mi-modal-toggle"></div>
<div class="mi-modal-wrapper mi-modal-transition">
<div class="mi-modal-header">
<h2 class="mi-modal-heading">This is a modal</h2>
<button class="mi-modal-close mi-modal-toggle">×</button>
</div>
<div class="mi-modal-body">
<div class="mi-modal-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>
</div>
</div>
<div class="modal-footer">
<button class="mi-btn btn-danger mi-ripple mi-ripple-light mi-modal-toggle">No</button>
<button class="mi-btn btn-info mi-ripple mi-ripple-light">Confirm</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>