Popup Share Modal Box UI Design Using HTML CSS and JavaScript

Popup Share Modal Box UI Design Using HTML CSS and JavaScript

Popup Share Modal Box UI Design

Hey friends, today in this blog you’ll learn how to create a Popup Share Modal UI Design using HTML CSS & JavaScript. In This project (Popup Share Modal Box UI Design the first thing you can see In this project [Popup Share Modal Box UI Design], is a modal button “Share Modal" when you click on it it shows the Modal with amazing animation and awesome hover animation. Also in this [Popup Share Modal UI Design], there are some social media icons with awesome hover animation, and also an input field to copy the link to clipboard. There is also a close icon, when you click on it the modal will be hidden

Link to Popup Share Modal Box UI Design

JavaScript methods used in this project

execCommad(): This method executes the specified command for the selected part of an editable element.

Download Code Files

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Share Modal Pop Up</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <input type="checkbox" name="" id="pop">
  <label for="pop" class="modalbtn">Share Modal</label>
    <div class="container">
      <div class="modal">
        <div class="menu">
          <span class="text">Share Modal</span>
          <label for="pop" class="close"><i class="fa fa-close"></i></label>
        </div>
      </div>
      <div class="link">
        <span>Share the file via</span>
        <div class="links">
          <li class="icons"><i class="fa fa-facebook-f"></i></li>
          <li class="icons"><i class="fa fa-twitter"></i></li>
          <li class="icons"><i class="fa fa-instagram"></i></li>
          <li class="icons"><i class="fa fa-whatsapp"></i></li>
          <li class="icons"><i class="fa fa-linkedin"></i></li>
        </div>
        <div class="box">
          <p>Or Copy link</p>
          <i class="fa fa-link"></i><input type="text" class="text" value="https://example/share.com" id="myInput">
          <button type="button" class="button" onclick="myFunction()">Copy</button>
        </div>
      </div>
    </div>

      <script src="script.js"></script>

</body>
</html>

CSS CODE

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
::selection{
  background: #bef4d2;
}
body{
  background: #3498db;
}
.container{
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  padding: 25px;
  width: 100%;
  border-radius: 15px;
  max-width: 380px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.container .menu{
  display: flex;
  justify-content: space-between;
}
.menu .text{
  font-size: 22px;
  font-weight: 600;
}
.menu .close{
  width: 30px;
  height: 30px;
  background: #ecf0f1;
  text-align: center;
  line-height: 30px;
  border-radius: 50px;
  color: #95a5a6;
  cursor: pointer;
}
.link{
  margin: 20px 0;
}
.link span{
  font-size: 18px;
}
.link .icons{
  margin: 0 20px;
}
.link .icons{
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid #95a5a6;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  margin: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.links .icons i.fa-facebook-f{
  color: #4267B2;
}
.links .icons i.fa-twitter{
  color: #1DA1F2;
}
.links .icons i.fa-instagram{
  color: #FD1D1D;
}
.links .icons i.fa-whatsapp{
  color: #25D366;
}
.links .icons i.fa-linkedin{
  color: #0077B5;
}
.links .icons:nth-child(1):hover{
  background: #4267B2;
}
.links .icons:nth-child(2):hover{
  background: #1DA1F2;
}
.links .icons:nth-child(3):hover{
  background: #FD1D1D;
}
.links .icons:nth-child(4):hover{
  background: #25D366;
}
.links .icons:nth-child(5):hover{
  background: #0077B5;
}
.links .icons:hover i{
  color: #fff;
}
.box p{
  margin-bottom: 10px;
}
.box i.fa-link{
  color: #4267B2;
  padding-right: 10px;
}
.box input{
  max-width: 220px;
  width: 100%;
  height: 32px;
  border: 1px solid #ddd;
  padding: 0 10px;
  outline: none;
  color: #444;
  margin-right: 5px;
}
.box button{
  width: 90px;
  height: 34px;
  position: absolute;
  outline: none;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background: #3498db;
  font-size: 15px;
  color: #fff;
  transition: all 0.3s ease;
}
.box button:hover{
  background: #4267B2;
}
#pop:checked ~ .container{
  top: 50%;
  opacity: 1;
  pointer-events: auto;
}
#pop:checked ~ .modalbtn{
  opacity: 0;
}
.modalbtn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 18px;
  background: #fff;
  padding: 10px 20px;
  color: #4267B2;
  border-radius: 8px;
  transition: 0.3s ease;
  cursor: pointer;
  opacity: 1;
}
.modalbtn:hover{
  color: #0077B5;
}
input[type="checkbox"]{
  display: none;
}

JAVASCRIPT CODE

function myFunction() {
  // This is to get the text attribute by id so it can be copied to clipboard
  var copyText = document.getElementById("myInput");
  // On Text Select
  copyText.select();
  copyText.setSelectionRange(0, 99999) // This is the selection range the attribute takes to be selected
  document.execCommand("copy"); // give the attribute a commad which is to copy the text hope the expalaton helps
  alert("Copied the text: " + copyText.value); // This is just an alert to notify that the text has been selected + the attribute that it selected
}

Popup Share Modal Box UI Design Using HTML CSS and JavaScript

Creative Tutorials

Post a Comment

Post a Comment

Contact Form