Tutorial: Creating a Modal/Popup using <dialog>
In this tutorial, I’ll be sharing with you on how to create a popup/modal (herein states as modal) using <dialog>. Base code shall be provided for you to practise. Also, while it is rather a straightforward tutorial, it is recommended for you to have some knowledge of CSS and HTML as I will assume that you know a little bit about them.
To create a modal, there are five parts that I’ll be explaining which are:
The modal + the close button
The Fade effect [Optional]
To ensure that your modal works, we need to add a script into our code. All you need to do is copy the code below and paste it before </body>:
<script> /// MODAL SCRIPT BY JASMIN @ https://phantasyreign.tumblr.com/ const body = document.querySelector("body"); const popup = document.querySelector("#modal"); const openModal = document.querySelector(".open-modal"); const closeModal = document.querySelector(".close-modal"); openModal.addEventListener("click", () => { modal.showModal(); body.style.overflow = "hidden"; }); modal.addEventListener("keydown", e => { if(e.keyCode === 27){ e.preventDefault() } }) closeModal.addEventListener("click", () => { modal.close(); body.style.overflow = "auto"; }); </script>
This script tells us three things:
When you click the open button, the modal will appear and you cannot scroll down the contents behind the modal;
When you press the esc key, it won’t work;*
When you click the close button, the modal will disappear and you can scroll the blog as per usual.
*The reason why I include this part is because in the event if the blog contains a scroll bar, if a person press the esc key instead of clicking the close button, such scroll bar will not appear.
To add an open button, simply add the code below and paste it at the desired placement:
<button class="button open-modal">Open Modal</button>
Tips: If the design of your open and close button are the same, then I recommend if you include another class value of button inside your class attribute so that it’ll be easier for you to code.
TAKE NOTE: Do not change the name of the open-modal.
If you know CSS, there are many ways to code a button. Nevertheless, for the purpose of this tutorial, I have customised the button (both the open and close button) as follows:
.button{ /*BASIC*/ background-color:white; border:1px solid #eee; border-radius:inherit; width:100px; outline:0; padding:.25rem .5rem; /*FONTS*/ font-family:karla; text-transform:uppercase; /*DO NOT TOUCH UNLESS YOU KNOW WHAT YOU'RE DOING*/ cursor:pointer; }
You can also use .open-modal instead of .button if you want to.
3. The Modal + The Close Button
To create the modal, we will be using <dialog>. To achieve it, we need to add the HTML before </body> and the <script>. Don’t worry if you’re confused, you can refer back to the base code to understand what I mean by before </body> and the <script>.
<dialog id="modal"> <p>This is your content <button class="button close-modal"> Close Modal </button> </dialog>
Depending on where you want to position your close button, you may need to change the position of your close button’s HTML code before or after the content.
By default, the modal will not be shown without the open button and the script. However, since we have included the script as well as the open button, you can see that once you click the open button, the modal appears! To beautify it a little bit more, you can customise the modal as follow:
/*MODAL CONTENT*/ #modal{ /*BASICS*/ width:50%; background:rgb(238 238 238 / 0.9); border:1px solid lightyellow; border-radius:10px; padding:1rem 2rem; outline:0; /*DO NOT TOUCH UNLESS YOU KNOW WHAT YOU'RE DOING*/ max-height:50vh; overflow:auto; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
For the close button, feel free to use your own creativity to customise it! You can also use the same design as your open button as what you’ve seen inside the demo. If the position of your close button is the same as what has been shown in the demo, to center it, I added the following code:
.close-modal{ margin:0 auto; display:block; }
We can think of backdrop as something similar as a lightbox in a photoset. By default, you can see that when a modal is opened, everything except for the modal turns darker. To customise the said backdrop, all you need to do is add this code:
/*MODAL BACKGROUND*/ #modal::backdrop{ backdrop-filter:blur(10px); background:rgb(238 238 238 / 0.25); }
Of course, you can also add background image and the likes if you know how to do so.
The Fade Effect [Optional]
In order to create the fade effect, we need to use the animation property. As such simply add the following code inside #modal and #modal::backdrop:
animation:1s fade ease-in-out;
As such, the both codes will look like this:
/*MODAL CONTENT*/ #modal{ /*BASICS*/ width:50%; background:rgb(238 238 238 / 0.9); border:1px solid #eee; border-radius:10px; padding:1rem 2rem; outline:0; /*DO NOT TOUCH UNLESS YOU KNOW WHAT YOU'RE DOING*/ max-height:50vh; overflow:auto; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); animation:1s fade ease-in-out; } /*MODAL BACKGROUND*/ #modal::backdrop{ backdrop-filter:blur(10px); background:rgb(238 238 238 / 0.25); animation:1s fade ease-in-out; }
After that, add this code after #modal::backdrop :
@keyframes fade{0%{opacity:0;}50%{opacity:1;}}
With that, you’re done! Please like and/or reblog this if you found this tutorial helpful! Kindly credit me if you use this tutorial :)
origamiaround
areudirty
pixelskylines
jacobvanloon
dailybridgerton
gracieabrams
blakekathryn
kianamaiart
baratheonpilled
