CSS Transition a Modal Dialog Element on Open

Introduction

Web modals can be described as an important aspect of web user interfaces since they give the option to show data or for the user inputs without changing the page other than the modal.

Using CSS to apply transitions aids the UI where opening and closing display modals to the user are smooth and more natural. In this tutorial, you will learn how you can use CSS transitions to have more engaging access to a page with a modal dialog box.

Requirements

To follow along with this tutorial, you will need ?

• Knowledge and using skills of HTML, CSS, and JavaScript as key technologies for web applications.
• A current version of a web browser that includes the dialog element such as Chrome, Firefox, or Edge browsers.
• Any code editor that you currently own or wish to use such as Visual Studio Code, Sublime Text, and others.

Technologies Used

• HTML ? To use in order to layout the modal dialog message and buttons.
• CSS ? Used for putting style to the modal open and making transition effects.
• JavaScript ? To handle the functionality of opening and closing of the modal.

First, Create the HTML Structure

First of all, let's create a basic structure of HTML for the modal dialog to be created. The buttons we are going to use are - the button to launch the dialog and the dialog itself must contain the button to close it.

Code

<button id="open-button">Open Dialog Element</button> <dialog> <button id="close-button">Close Dialog Element</button> </dialog> 

Second, Add CSS to style and for Transition being in charge of the appearance of a page.

Subsequently, use CSS code to style how the modal ought to be displayed and the manner in which the transitions should be done. The following CSS sets the initial state of the dialog and the transitions ?

Code

button { display: block; } dialog { position: absolute; top: 50px; margin: auto; padding: 0; width: 50%; height: 50%; background-color: red; opacity: 0; pointer-events: none; /* To prevent clicks when hidden */ transition: opacity 2s ease-in, background-color 2s ease-in; } dialog.open { background-color: green; opacity: 1; pointer-events: auto; /* Enable interaction when visible */ } 

Now, add JavaScript to control the behaviour of the dialog and its opening and closing. This script will handle the display logic and apply the

const dialog = document.querySelector("dialog"); // Handle the opening of the dialog document.querySelector("#open-button").addEventListener("click", () => { dialog.showModal(); setTimeout(() => dialog.classList.add('open'), 10); // Allow time for dialog to open before adding class }); // Handle the closing of the dialog document.querySelector("#close-button").addEventListener("click", () => { const close = e => { if (e.propertyName === 'opacity') { dialog.close(); dialog.removeEventListener('transitionend', close); } }; dialog.addEventListener('transitionend', close); dialog.classList.remove('open'); // Start transition to hide the dialog }); dialog.addEventListener('close', () => dialog.classList.remove('open')); 

transition classes at the right moments ?

Explanation

• HTML Structure ? On the HTML side there is a button to open the modal and the <dialog> element with the close button. Even for modal interfaces, the simplest yet effective solution is available in <dialog> element.
• CSS Styling ? The CSS sets styling rules for the buttons as well as in the dialogue. Modal is layout absolutely, center-aligned with the default background-color of red and opacity With the transition, the properties needed for the transition effect are input, and the transition property is applied to both the opacity and the background-color. The .open class alter the color of back ground.
• JavaScript Logic ? JavaScript controls the behavior of the modal ?
  • The dialog.showModal() method is called once a user feedback on the "Open Dialog Element" button. A small timeout enables the dialog to appear before the.open class is applied.
  • If the button "Close Dialog Element" is clicked, then it adds event listener for the transitionend event. After the animation is done on the opacity transition, closing the modal is done using dialog.close().

The CSS has a pointer-events property that guarantees that all the elements cannot be clicked on when the modal is inactive.

Code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modal with CSS Transitions</title> <style> button { display: block; margin-top: 20px; } dialog { position: absolute; top: 50px; margin: auto; padding: 20px; width: 50%; height: 50%; background-color: red; opacity: 0; pointer-events: none; /* Prevent interaction when hidden */ -webkit-transition: opacity 2s ease-in, background-color 2s ease-in; -o-transition: opacity 2s ease-in, background-color 2s ease-in; transition: opacity 2s ease-in, background-color 2s ease-in; } dialog.open { background-color: green; opacity: 1; pointer-events: auto; /* Enable interaction when visible */ } </style> </head> <body> <button id="open-button">Open Dialog Element</button> <dialog> <button id="close-button">Close Dialog Element</button> </dialog> <script> const dialog = document.querySelector("dialog"); // Handle the opening of the dialog document.querySelector("#open-button").addEventListener("click", () => { dialog.showModal(); setTimeout(() => dialog.classList.add('open'), 10); // Apply class after showing the modal }); // Handle the closing of the dialog document.querySelector("#close-button").addEventListener("click", () => { const close = e => e.propertyName === 'background-color' && dialog.close() || dialog.removeEventListener('transitionend', close); dialog.addEventListener('transitionend', close); dialog.classList.remove('open'); // Trigger transition }); // Ensure 'open' class is removed on close dialog.addEventListener('close', () => dialog.classList.remove('open')); </script> </body> </html> 

Conclusion

In this tutorial, we were able to implement a modal dialog with effect using CSS transition which made the page more interactive. This way, with help of <dialog> element, CSS to style and JavaScript for functions, we get an aesthetically pleasing and easy to use modal. Additional, you can extend this example by including more content to the modal or by rearranging the styles based on the theme of your application. Happy coding!