Hot Topics
Razorpay Solution
Technical Round
<button id="modal-trigger">Open Modal</button>
<div id="modal-container" style="display: none;">
<div id="modal-content">
<p>Modal Content</p>
<button id="modal-close">Close</button>
</div>
</div>You can then add some CSS to style the modal and JavaScript to toggle the modal’s visibility when the trigger button is clicked and close the modal when the close button is clicked.
#modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
}
#modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
box-shadow: 0px 0px 10px #000;
}
const trigger = document.getElementById("modal-trigger");
const container = document.getElementById("modal-container");
const close = document.getElementById("modal-close");
trigger.addEventListener("click", () => {
container.style.display = "block";
});
close.addEventListener("click", () => {
container.style.display = "none";
});
This is a simple example, but you can use JavaScript libraries such as jQuery UI or Bootstrap to create more advanced modals with additional functionality.
Popular Category
Hot Topics
Go through our study material. Your Job is awaiting.