Skip to main content

Archive

Show more

Beautiful Modal Box Animation | Modal Popup Design | Rustcode

by Rustcode
modal-box-animation-html-css-javasript

Beautiful Modal Box Animation html css and JavaScript

We have already written an article on Modal Box in which we used Popbox script. But in this article, we will use html, css and JavaScript to design the "modal box". We'll use the "KeyFrame" property of css for the animation.

In this animation you will see a button on the screen and after clicking on it a popup box will appear. There will be a cross button to close this modal box and there will be a description along with the heading.

We have already created a lot of animation using javascript and css, check out the playlist. We hope you like it.

You can read interesting articles on web development. The link is given below.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Beautiful Modal Box Animation | Rustcode</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Beautiful Modal Box Animation | Rustcode</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <button id="btn" onclick="openModal()">Open Modal</button>
    <div class="modal-container" id="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span class="close" onclick="closeModal()">&times;</span>
          <h2>Modal Header</h2>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>



03. CSS

body{
  font-family: sans-serif,arial;
}
#btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 0px;
  color: white;
  font-size: 14px;
  padding: 18px 24px;
  background: #0000ff;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
#btn:hover{
  box-shadow: 0px 4px 18px 1px rgba(0, 0, 0, 0.9);
}
.modal-container{
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: auto;
  display: none;
  background-color: rgba(25, 2, 100, 0.9);
}
.modal-content{
  position: relative;
  background: #fff;
  margin: auto;
  padding: 0px;
  width: 60%;
  animation-name: DropAnimation;
  animation-duration: 0.4s;
  transition: all .4s ease-in;
}
.modal-header{
  padding: 12px 16px;
  background: #0000ff;
  color: white;
  font-weight: lighter;
}
.modal-body{
  padding: 20px;
  line-height: 2em;
  text-align: justify;
}
.close{
  float: right;
  font-size: 30px;
  font-weight: bold;
  margin: 18px 12px;
  transition: all .5s;
}
.close:hover, .close:focus{
  cursor: pointer;
  transform: rotate(90deg);
}
@keyframes DropAnimation {
  from{
    top: -250px;
    opacity: 0;
  }
  to{
    top: 0px;
    opacity: 1;
  }
}



04. JavaScript

var modal = document.getElementById('modal');
function openModal() {
    modal.style.display = "block";
}
function closeModal() {
    modal.style.display = "none";
}

window.onclick = function(event){
  if (event.target == modal) {
    modal.style.display = "none";
  }
}


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download from here and change this according to your need.





Comments

Post a Comment