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

    
        Click me!
    
    

        

            
What is a Modal 😎
            

                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?
            
            
                Close me
            
        
    
    

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');
});

Download Source Code

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.

The post How to create Modal Popup using JavaScript in ASP.Net appeared first on DotNetTec.