I am currently designing a webpage using bootstrap and EJS. I want to create a modal window when one button is clicked to show additional information, and when an X button or “close” button is pressed, the modal window is closed.
However, the transform effect inside the card:hover css effect is messing up the modal window.
For starters, here’s the rough code
<%- 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;
}
.badge-custom {
font-size: 0.9em;
padding: 8px 12px;
border-radius: 20px;
}
/* Modal Style */
.modal-header {
border-bottom: 1px solid #dee2e6;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-body {
padding: 2rem;
}
.modal-footer {
border-top: 1px solid #dee2e6;
display: flex;
align-items: center;
justify-content: flex-end;
}
</style>
...
<div class="container mt-5">
...
<div class="row">
<div class="col-md-6 mb-4">
<div class="card bg-light">
<div class="card-header">
<h5 class="card-title mb-0">고객</h5>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<% project.consumers.forEach(consumer => { %>
<li class="list-group-item bg-light">
<i class="fas fa-user-tie me-2"></i>
<%= consumer.name %>
<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>
<!-- Modal Start -->
<div class="modal fade" id="consumerModal<%= consumer.id %>" tabindex="-1" aria-labelledby="consumerModalLabel<%= consumer.id %>" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="consumerModalLabel<%= consumer.id %>"><%= consumer.name %>의 상세 정보</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<% Object.entries(consumer.custom_attributes).forEach(([attrKey, attrValue]) => { %>
<p><strong><%= attrKey %>:</strong> <%= attrValue.content %></p>
<% }); %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
<!-- Modal End -->
</li>
<% }); %>
</ul>
</div>
</div>
</div>
...
</div>
So when I press the button below, a modal window should appear 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>
However, the first results were as follows.
https://i.imgur.com/PysG6V1.gif
As you can see in the image, a modal window appears in two places, and it flickers so fast that I can’t press the button. I asked ChatGPT to solve this problem and he recommended using the following JS to temporarily disable the transform.
<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>
This eliminated the flickering modal window, but introduced another problem. The modal window would appear briefly in the div area that fetches the modal window, then disappear. Of course, many visitors will pass by without seeing this brief modal window, but I don’t think this is a good idea.
https://i.imgur.com/ysUP72n.gif
transform: translateY(-5px);
In my code, if just one line above inside the CSS is missing, everything works fine.
https://i.imgur.com/7K05E6Y.gif
I would gladly give up the effect of the card moving slightly when the user hovers over the card component to avoid this complication. However, the current situation doesn’t make logical sense to me, and I need to know why it’s happening so I can move on to the next step. Why is this happening?
Attempted to inject Javascript, attempted to modify CSS.
