Created
October 19, 2024 11:49
-
-
Save thinkphp/aee8ce28b492c14dbf9ec7e5cf553974 to your computer and use it in GitHub Desktop.
modal-window.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Styled Modal Window Example</title> | |
<style> | |
body { | |
font-family: Arial, sans-serif; | |
background-color: #f0f0f0; | |
margin: 0; | |
padding: 20px; | |
} | |
#openModal { | |
background-color: #4CAF50; | |
color: white; | |
padding: 10px 20px; | |
border: none; | |
border-radius: 5px; | |
cursor: pointer; | |
font-size: 16px; | |
transition: background-color 0.3s; | |
} | |
#openModal:hover { | |
background-color: #45a049; | |
} | |
.modal { | |
display: none; | |
position: fixed; | |
z-index: 1; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
overflow: auto; | |
background-color: rgba(0,0,0,0.5); | |
animation: fadeIn 0.3s; | |
} | |
@keyframes fadeIn { | |
from { opacity: 0; } | |
to { opacity: 1; } | |
} | |
.modal-content { | |
background-color: #fefefe; | |
margin: 10% auto; | |
padding: 30px; | |
border-radius: 10px; | |
box-shadow: 0 5px 15px rgba(0,0,0,0.3); | |
width: 90%; | |
max-width: 500px; | |
animation: slideDown 0.3s; | |
} | |
@keyframes slideDown { | |
from { transform: translateY(-50px); opacity: 0; } | |
to { transform: translateY(0); opacity: 1; } | |
} | |
.close { | |
color: #aaa; | |
float: right; | |
font-size: 28px; | |
font-weight: bold; | |
cursor: pointer; | |
transition: color 0.3s; | |
} | |
.close:hover { | |
color: #000; | |
} | |
h2 { | |
margin-top: 0; | |
color: #333; | |
} | |
.phone { | |
font-size: 24px; | |
color: #4CAF50; | |
margin: 20px 0; | |
} | |
.description { | |
color: #666; | |
line-height: 1.6; | |
margin-bottom: 20px; | |
} | |
.button-container { | |
display: flex; | |
justify-content: space-between; | |
margin-top: 20px; | |
} | |
.modal-button { | |
padding: 10px 20px; | |
border: none; | |
border-radius: 5px; | |
cursor: pointer; | |
font-size: 16px; | |
transition: background-color 0.3s, transform 0.1s; | |
} | |
.modal-button:active { | |
transform: scale(0.98); | |
} | |
.primary-button { | |
background-color: #4CAF50; | |
color: white; | |
} | |
.primary-button:hover { | |
background-color: #45a049; | |
} | |
.secondary-button { | |
background-color: #f44336; | |
color: white; | |
} | |
.secondary-button:hover { | |
background-color: #da190b; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Styled Modal Window Example</h1> | |
<button id="openModal">Open Modal</button> | |
<div id="myModal" class="modal"> | |
<div class="modal-content"> | |
<span class="close">×</span> | |
<h2>Contact Us</h2> | |
<div class="phone">📞 (555) 123-4567</div> | |
<p class="description">Have questions or need assistance? Our customer support team is here to help. Feel free to call us or use the buttons below to get in touch.</p> | |
<div class="button-container"> | |
<button class="modal-button primary-button" id="callNow">Call Now</button> | |
<button class="modal-button secondary-button" id="sendEmail">Send Email</button> | |
</div> | |
</div> | |
</div> | |
<script> | |
const modal = document.getElementById("myModal"); | |
const btn = document.getElementById("openModal"); | |
const span = document.getElementsByClassName("close")[0]; | |
const callNowBtn = document.getElementById("callNow"); | |
const sendEmailBtn = document.getElementById("sendEmail"); | |
btn.onclick = function() { | |
modal.style.display = "block"; | |
} | |
span.onclick = function() { | |
modal.style.display = "none"; | |
} | |
window.onclick = function(event) { | |
if (event.target == modal) { | |
modal.style.display = "none"; | |
} | |
} | |
callNowBtn.onclick = function() { | |
alert("Calling (555) 123-4567..."); | |
// In a real application, you might initiate a call here | |
} | |
sendEmailBtn.onclick = function() { | |
alert("Opening email client..."); | |
// In a real application, you might open the default email client here | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment