Modal/pop-up box with Submit & Cancel button Using HTML, CSS with JavaScript:
By Using below Code you can able to create Modal box/pop-up box using HTML & CSS
Click Methods are written in JavaScript.
Output:
By Using below Code you can able to create Modal box/pop-up box using HTML & CSS
Click Methods are written in JavaScript.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Modal using HTML, JavaScript and CSS</title>
<style>
/* main modal css */
.alertModal{
display: none; /* Hidden on Page Open */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* It will Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* main modal content css */
.modalContent{
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
border-radius: 6px;
}
/* modal-header css */
.modalHeader{
padding: 2px 16px;
background-color: #20cad6;
color: white;
}
/* modal-body css */
.modalBody{
padding: 2px 16px;
}
/* The clos/cross button css */
.closeBtn{
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.closeBtn:hover,
.closeBtn:focus {
color: rgb(224, 12, 12);
text-decoration: none;
cursor: pointer;
}
.modalFooter{
padding: 22px 28px;
background-color: #20cad6;
color: #ffffff;
text-align: right;
}
/* common css for buttons */
.cmCss{
float: right;
padding: 0 12px;
font-size: 14px;
font-weight: bold;
border-radius: 6px;
}
/* separate css for buttons */
#cancelBtn{
margin-left: 4px;
background-color: #ee4217;
}
#submitBtn{
background-color: #5cb85c;
}
</style>
</head>
<body>
<div class="alertModal">
<div class="modalContent">
<div class="modalHeader">
<span class="closeBtn">×</span>
<p>Header</p>
</div>
<div class="modalBody">
<h1>Hello Dev!</h1>
<p>Add you stuff here</p>
</div>
<div class="modalFooter">
<button type="button" class="cmCss" id="cancelBtn">Cancel</button>
<button type="button" class="cmCss" id="submitBtn">Submit</button>
</div>
</div>
</div>
<div>
<button id="triggerModal">Click me To Open Modal</button>
</div>
<script>
var onModal = document.getElementById("triggerModal");
var modal = document.getElementsByClassName("alertModal")[0];
var span = document.getElementsByClassName("closeBtn")[0];
var submit = document.getElementById("submitBtn");
var cancel = document.getElementById("cancelBtn");
onModal.onclick = function () {
modal.style.display='block';
}
span.onclick = function () {
console.log('Close Symbol button');
modal.style.display='none';
}
cancel.onclick = function () {
console.log('Cancel Button');
modal.style.display='none';
}
submit.onclick = function () {
console.log('Submit Button');
}
// On click outside of the modal, It will close it by below function
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
Output:
Comments
Post a Comment