In this blog post, you will learn how to create a modal popup using javascript in asp.net on hyperlink click with an example. Keep reading on Html Form Validation using JavaScript Source Code, jQuery Alert Message Box.
Create a Modal (Popup) with HTML/CSS and JavaScript
In this tutorial, we’re going to learn how to build a modal/popup using Html, CSS, and a little bit of JavaScript to toggle a class.
There are following steps that you have to complete for functionality:
- HTML: markup to create the modal element.
- CSS: styling to determine how your modal looks and appears on the page.
- Javascript: placing event listeners so the modal appears/disappears depending on your user interactivity.
Find the below source code:-
HTML Markup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to create modal popup using javascript in asp.net</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<button id="open">
Click me!
</button>
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>What is a Modal 😎</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quo hic neque odio nisi, autem magnam.
Labore commodi, eveniet saepe doloremque earum ullam officiis officia in natus rem quaerat excepturi sit blanditiis
reprehenderit ea. Aut veniam dolorem tenetur rem voluptatum?
</p>
<button id="close">
Close me
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS Style
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #EDEEF6;
font-family: 'Poppins', sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
button {
background-color: #47A386;
border: 0;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
color: #fff;
font-family: inherit;
font-size: 14px;
padding: 10px 25px;
}
.modal-container {
position: fixed;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
transition: opacity 0.3s ease;
pointer-events: none;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
.modal {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 30px 50px;
text-align: center;
width: 600px;
max-width: 100%;
/* transform: translateY(-200%); */
/* transition: transform 0.3s ease; */
}
.modal-container.show .modal {
/* transform: translateY(0); */
}
.modal h1 {
margin: 0;
}
.modal p {
font-size: 14px;
opacity: 0.7;
}JavaScript Code
const open = document.getElementById('open');
const close = document.getElementById('close');
const modal = document.getElementById('modal_container');
open.addEventListener('click', () => {
modal.classList.add('show');
});
close.addEventListener('click', () => {
modal.classList.remove('show');
});Conclusion
I hope you liked this article on how to create a modal popup using javascript in asp.net. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Leave a Reply