Popup Share Modal UI Design using HTML CSS & JavaScript
Hey friends, today in this blog you’ll learn how to create a Popup Share Modal UI Design using HTML CSS & JavaScript. In the previous blog, I have shared how to create a Poll UI Design in HTML CSS & JavaScript and now it’s time to create Share Modal. If you’re looking for some other type of modals then click here to view them all.
In this project [Popup Share Modal UI Design], at first, on the webpage, there is a view modal button, when you click on that button then the modal box appears with a popup animation. In this share modal box, there are some social media icons with pretty cool hover animation and an input box to copy the link. There is also a close icon to the right top corner to hide this modal box. To show or hide the Modal Box and copy the given link, I used JavaScript.
Video Tutorial of Popup Share Modal UI Design
In the video, you have seen the demo of this share modal box and how I created it. As I already told you, I used HTML & CSS to create the layout/design of this modal and JavaScript to show or hide the modal and to copy the given link. If you’re a beginner and you don’t know about JavaScript then you may have little difficulty to understanding the JavaScript codes of this modal box.
But I have tried to explain the JavaScript codes by written comments. So please watch the video two or more times and then try to make it by yourself instead of depending on the source codes or files. In case you won’t make this modal or somehow you’ll get errors then don’t worry I have given source codes and files for free. Just scroll down and recheck your codes with the given codes or download the code files.
JavaScript Methods that are used on this project are: InputElement.select() and execCommand().
- InputElement.select(): This method selects all text or values in an element that contains a text field (<textarea>, <input>).
- execCommand(): This method executes the specified command for the selected part of an editable element and in our case, we have passed copy and it’ll copy the selected input field values.
You might like this:
- Email Subscription Popup Box
- Cookie Consent Box in JavaScript
- Limit Input Characters in JavaScript
- Minimal Poll UI Design in HTML & CSS
Popup Share Modal UI Design [Source Codes]
To create this program [Share Modal]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this Popup Share Modal from this given link. Click here to download code files.
Originally published at https://www.codingnepalweb.com on April 7, 2021.
