Skip to content

Instantly share code, notes, and snippets.

@zuzannamj

zuzannamj/modal-dialog.html

Last active July 16, 2024 15:39
Show Gist options
  • Save zuzannamj/21d0a5e4f758e981caa44d03cbd2532d to your computer and use it in GitHub Desktop.
Save zuzannamj/21d0a5e4f758e981caa44d03cbd2532d to your computer and use it in GitHub Desktop.
Download ZIP
Modal dialog on a CloudPage
Raw
modal-dialog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: Arial, sans-serif; }
.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.4); padding-top: 60px; }
.modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; border-radius: 8px; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }
.button { background-color: #0070d2; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
.button:hover { background-color: #005fb2; }
</style>
</head>
<body>
<h2>Modal Dialog Example</h2>
<button id="myBtn" class="button">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal..</p>
<button class="button">OK</button>
<button class="button">Cancel</button>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
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";
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment