February 27, 2022 HTML

Modal is not responsive for mobile, How to make it responsive on mobile?

Issue

My modal floats on the center of a desktop screen but on a mobile screen it floats on the top. When I keep reducing my screen size, it keeps holding its upper side, I want to show my modal content in the center of my phone screen. How can I make it float on the center of my phone’s screen? I am attaching my code below. Thank you in advance.

const modals = document.querySelectorAll(".modal");
const modalBtns = document.querySelectorAll(".button");
const closeBtns = document.querySelectorAll(".close");

// Events
modalBtns.forEach((btn, index) =>
  btn.addEventListener("click", () => openModal(index))
);
closeBtns.forEach((btn, index) =>
  btn.addEventListener("click", () => closeModal(index))
);
// for closing when you click outside
modals.forEach((modal, index) =>
  modal.addEventListener("click", (e) => {
   if(e.target === e.currentTarget){
     closeModal(index);
   }
})
);

// Open
function openModal(index) {
  modals[index].style.display = "block";
}

// Close
function closeModal(index) {
  modals[index].style.display = "none";
}

/* Modal section styling */

:root {
--modal-duration: 1s;
--modal-color: crimson;
}

.button {
font-family: 'poppins', sans-serif;
display: inline-block;
background: crimson;
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 8px 16px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}

.button:hover {
color: crimson;
background: none;
}

.modal {
font-family: 'Poppins', sans-serif;
display: none;
position: fixed;
z-index: 99999;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
margin: 51px auto;
width: 60%;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
animation-name: modalopen;
animation-duration: var(--modal-duration);
}

.modal-header h2,
.modal-footer h3 {
margin: 0;
}

.modal-header {
background: var(--modal-color);
font-size: 20px;
text-align: center;
padding: 10px;
color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.modal-body {
background:crimson;
}

.modal-footer {
background: var(--modal-color);
padding: 10px;
font-size: 15px;
color: #fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

.close {
float: right;
font-size: 30px;
color: #fff;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.responsive {
width: 100%;
height: auto;
}
@keyframes modalopen {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

<button id="modal-btn" class="button">Modal</button>
<div id="my-modal" class="modal">
    <div class="modal-content">
    <div class="modal-header">
        <span class="close">&times;</span>
        <h3 style="font-weight: 400">On Going Project</h3>
    </div>
    <!-- Modal Body -->
    <div class="modal-body">
        <img src="#" alt="" style="width:100%;height:100%;">
    </div>
    <div class="modal-footer">
        </div>
    </div>
</div>

Solution

You can try with add some CSS code and this code for desktop and mobile both of screen in center position. i am sure this code helpful for you.
jsfiddle link

.modal-content { margin: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}

Answered By – Gaurav

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply Cancel reply