Hey there! I'm in the midst of crafting a webpage using Bootstrap and EJS. My aim is to craft a modal window that pops up when a specific button is clicked to display extra information, and upon clicking an X or "close" button, the modal should disappear. However, the transform effect within the card:hover CSS style seems to be causing issues with the modal window. Here's a snippet of the code to give you an idea:
<%- include('_header'); -%> << header includes Bootstrap css, js and Font Awesome css.
<style>
/* Card Style */
.card {
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.card-header {
background-color: #007bff;
color: white;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
// Other styles...
</style>
// Other HTML code...
If you click on the button below, a modal window should pop up in the center of the screen.
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#consumerModal<%= consumer.id %>">
<i class="fas fa-info-circle"></i>
</button>
I encountered some unexpected results as seen here:
It appears that the modal window flickers hastily making it hard to interact with. The suggested solution was to momentarily disable the transform using the following JS script:
<script>
document.addEventListener('DOMContentLoaded', function () {
var cards = document.querySelectorAll('.card');
var modals = document.querySelectorAll('.modal');
modals.forEach(function(modal) {
modal.addEventListener('show.bs.modal', function () {
cards.forEach(function(card) {
card.style.transform = 'none';
});
});
modal.addEventListener('hidden.bs.modal', function () {
cards.forEach(function(card) {
card.style.transform = '';
});
});
});
});
</script>
While this resolved the flickering issue, a new problem surfaced where the modal would briefly appear inside the div area before disappearing.
Eliminating the line transform: translateY(-5px); works fine without these complications.
To avoid these complexities, I'm willing to sacrifice the hover effect on the card moving slightly. However, the current situation doesn't seem logical to me, and I'm eager to understand why this is happening so I can proceed smoothly. Any insights into why this might be occurring?
Tried adding JavaScript, tinkered with CSS properties.