Popup Share Modal UI Design using HTML CSS & JavaScript

14

Popup Share Modal UI Design using HTML CSS & JavaScriptHey 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 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:

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 the given download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Popup Share Modal | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
</head>
<body>
  <button class="view-modal">View Modal</button>
  <div class="popup">
    <header>
      <span>Share Modal</span>
      <div class="close"><i class="uil uil-times"></i></div>
    </header>
    <div class="content">
      <p>Share this link via</p>
      <ul class="icons">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-whatsapp"></i></a>
        <a href="#"><i class="fab fa-telegram-plane"></i></a>
      </ul>
      <p>Or copy link</p>
      <div class="field">
        <i class="url-icon uil uil-link"></i>
        <input type="text" readonly value="example.com/share-link">
        <button>Copy</button>
      </div>
    </div>
  </div>

  <script>
    const viewBtn = document.querySelector(".view-modal"),
    popup = document.querySelector(".popup"),
    close = popup.querySelector(".close"),
    field = popup.querySelector(".field"),
    input = field.querySelector("input"),
    copy = field.querySelector("button");

    viewBtn.onclick = ()=>{
      popup.classList.toggle("show");
    }
    close.onclick = ()=>{
      viewBtn.click();
    }

    copy.onclick = ()=>{
      input.select(); //select input value
      if(document.execCommand("copy")){ //if the selected text copy
        field.classList.add("active");
        copy.innerText = "Copied";
        setTimeout(()=>{
          window.getSelection().removeAllRanges(); //remove selection from document
          field.classList.remove("active");
          copy.innerText = "Copy";
        }, 3000);
      }
    }
  </script>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  /* background: #f2f3fb; */
  background: #7d2ae8;
}
::selection{
  color: #fff;
  background: #7d2ae8;
}
.view-modal, .popup{
  position: absolute;
  left: 50%;
}
button{
  outline: none;
  cursor: pointer;
  font-weight: 500;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: background 0.1s linear, border-color 0.1s linear, color 0.1s linear;
}
.view-modal{
  top: 50%;
  color: #7d2ae8;
  font-size: 18px;
  padding: 10px 25px;
  background: #fff;
  transform: translate(-50%, -50%);
}
.popup{
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  top: -150%;
  max-width: 380px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  transform: translate(-50%, -50%) scale(1.2);
  transition: top 0s 0.2s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
}
.popup.show{
  top: 50%;
  opacity: 1;
  pointer-events: auto;
  transform:translate(-50%, -50%) scale(1);
  transition: top 0s 0s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;

}
.popup :is(header, .icons, .field){
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popup header{
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9;
}
header span{
  font-size: 21px;
  font-weight: 600;
}
header .close, .icons a{
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
header .close{
  color: #878787;
  font-size: 17px;
  background: #f2f3fb;
  height: 33px;
  width: 33px;
  cursor: pointer;
}
header .close:hover{
  background: #ebedf9;
}
.popup .content{
  margin: 20px 0;
}
.popup .icons{
  margin: 15px 0 20px 0;
}
.content p{
  font-size: 16px;
}
.content .icons a{
  height: 50px;
  width: 50px;
  font-size: 20px;
  text-decoration: none;
  border: 1px solid transparent;
}
.icons a i{
  transition: transform 0.3s ease-in-out;
}
.icons a:nth-child(1){
  color: #1877F2;
  border-color: #b7d4fb;
}
.icons a:nth-child(1):hover{
  background: #1877F2;
}
.icons a:nth-child(2){
  color: #46C1F6;
  border-color: #b6e7fc;
}
.icons a:nth-child(2):hover{
  background: #46C1F6;
}
.icons a:nth-child(3){
  color: #e1306c;
  border-color: #f5bccf;
}
.icons a:nth-child(3):hover{
  background: #e1306c;
}
.icons a:nth-child(4){
  color: #25D366;
  border-color: #bef4d2;
}
.icons a:nth-child(4):hover{
  background: #25D366;
}
.icons a:nth-child(5){
  color: #0088cc;
  border-color: #b3e6ff;
}
.icons a:nth-child(5):hover{
  background: #0088cc;
}
.icons a:hover{
  color: #fff;
  border-color: transparent;
}
.icons a:hover i{
  transform: scale(1.2);
}
.content .field{
  margin: 12px 0 -5px 0;
  height: 45px;
  border-radius: 4px;
  padding: 0 5px;
  border: 1px solid #e1e1e1;
}
.field.active{
  border-color: #7d2ae8;
}
.field i{
  width: 50px;
  font-size: 18px;
  text-align: center;
}
.field.active i{
  color: #7d2ae8;
}
.field input{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
}
.field button{
  color: #fff;
  padding: 5px 18px;
  background: #7d2ae8;
}
.field button:hover{
  background: #8d39fa;
}

That’s all, now you’ve successfully created a Share Modal UI using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

Previous articleWorking Subscribe Button using HTML & CSS
Next articleTweet Box with Character Limit Highlighting in JavaScript

RELATED ARTICLESMORE FROM AUTHOR

14 COMMENTS

  2. Hi dear sir.

    Actually I wanna create a share button. And when any user share then It’s will be count and data will save in database using php.

    I can create share button but i can’t count share.
    How can i do this. Please make a video on it. Please sir

    • Just copy the codes and paste them inside your theme codes. I hope you know where to paste. A small mistake can break your whole site.

  4. This is so cool, thank you so much. Is there a way to add a background overlay when the pop up is initiated? Iv’e tried to add it myself but have very limited dev skills lol.

LEAVE A REPLY

Please enter your comment!
Please enter your name here