21'C 흐림
서울 강남구
TOAST NOTIFICATIONS - ERROR MESSAGE
HTML
<div class="container mt-1">
<div class="row justify-content-center text-center">
<div class="col-lg-3 col-md-4 col-sm-6 col-12">
<div class="ticketImage">
<img src="https://images.pexels.com/photos/1105666/pexels-photo-1105666.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="w-100">
</div>
<div class="ticket-sales-container">
<label for="ticket-quantity">Number of Tickets:</label>
<select id="ticket-quantity" name="ticket-quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
.
.
.
.
</div>
</div>
<div id="error-message" class="modal" aria-modal="true">
<div class="modal-content">
<p>Sorry, this event is sold out.</p>
</div>
</div>
.ticket-sales-container {
margin: 10px 20px 20px;
}
.add-to-cart {
display: block;
margin: 10px auto 0;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 3px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
.ticketImage>img {
height: 200px;
object-fit: cover;
border-radius: 8px;
margin-top: 20px;
}
@media screen and (min-width: 575px) {
.ticketImage>img {
height: 225px;
object-fit: cover;
}
}
@media screen and (min-width: 768px) {
.ticketImage>img {
height: 250px;
object-fit: cover;
}
}
@media screen and (min-width: 1024px) {
.ticketImage>img {
height: 300px;
object-fit: cover;
}
}
body {
background: linear-gradient(-45deg, #F2FFFA, #E5FFF6, #D8FFF2, #CBFFED);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
$('.add-to-cart').on('click', function() {
$('#error-message').fadeIn(200);
setTimeout(function() {
hideErrorMessage();
}, 2000)
})
$('body:has("#error-message[style="display: block"]")').on('click', function() {
hideErrorMessage();
})
function hideErrorMessage() {
$('#error-message').fadeout(300);
}
cpc-error-messages, codepenchallenge, toast, popup-message, ui