UI Components

Modal Window (Pop Up)

Demo
Code

Description

The Modal component is a dialog box/popup window that is displayed on top of the current page:

If you want different size of modal add below class with "modal-dialog"

"modal-sm" for small size modal
"modal-lg" for large modal
"modal-xl" for extra large modal

Setup

Step 1 : Add css file in your html : <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Step 2 : Add JS file in your html : <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Step 3 : Add HTML code from code tab

HTML

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   Open modal
</button>

<div class="modal fade " id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">×
      </div>
      
      <div class="modal-body">
        Modal body..
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Demo
Code

Click buttons to open popups

HTML

Default Modal

<a href="#" class="btn open-popup" data-id="popup_default">Default</a>
<div id="popup_default" class="popup">
 <div class="popup-overlay"></div>
  <div class="popup-content">
    <a href="#" class="close-popup" data-id="popup_default">×</a>
    <h1>Popup 1</h1>
    <p> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>

Scale Modal

<a href="#" class="btn open-popup" data-id="popup_2" data-animation="scale">Scale<</a>
<div id="popup_2" class="popup">
  <div class="popup-overlay"></div>
  <div class="popup-content">
    <a href="#" class="close-popup" data-id="popup_2">×</a>
    <h1>Popup 2</h1>
    <p> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>

Please change data-animation as per your need. example:

data-animation="scaleUp"
data-animation="scaleDown"
data-animation="slide"
data-animation="slideLeft"
data-animation="flipLeft"
data-animation="flipRight"
data-animation="rotate"
data-animation="rotateCube"

CSS

Please add animation css as per your required pop up.

.customPopup .popup {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
}
.customPopup .popup-overlay {
  background: rgba(0,0,0,0.9);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.customPopup .popup-content {
  position: absolute;
  background: #fff;
  width: 500px;
  margin: -58px 0 0 -264px;
  left: 50%;
  top: 50%;
  z-index: 11;
  padding: 14px;
}
.customPopup .close-popup {
  display: inline-block;
  position: absolute;
  top: -8px;
  right: -30px;
  font-size: 42px;
}
/* Animations */
.customPopup .fadeIn {
  animation: fadeIn 0.5s ease-in both;
  -webkit-animation: fadeIn 0.5s ease-in both;
}
@keyframes fadeIn {
  from { opacity: 0; }
}
@-webkit-keyframes fadeIn {
  from { opacity: 0; }
}

.customPopup .fadeOut {
  animation: fadeOut 0.5s ease-out both;
  -webkit-animation: fadeOut 0.5s ease-out both;
}
@keyframes fadeOut {
  to { opacity: 0; }
}
@-webkit-keyframes fadeOut {
  to { opacity: 0; }
}

.customPopup .scaleIn {
  animation: scaleIn 0.5s ease-in both;
  -webkit-animation: scaleIn 0.5s ease-in both;
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.5); }
}
@-webkit-keyframes scaleIn {
  from { opacity: 0; -webkit-transform: scale(0.5); }
}

.customPopup .scaleOut {
  animation: scaleOut 0.5s ease-out both;
  -webkit-animation: scaleOut 0.5s ease-out both;
}
@keyframes scaleOut {
  to { opacity: 0; transform: scale(0.5); }
}
@-webkit-keyframes scaleOut {
  to { opacity: 0; -webkit-transform: scale(0.5); }
}

.customPopup .scaleUpIn {
  animation: scaleIn 0.5s ease-in both;
  -webkit-animation: scaleIn 0.5s ease-in both;
}
.customPopup .scaleUpOut {
  animation: scaleUpOut 0.5s ease-in both;
  -webkit-animation: scaleUpOut 0.5s ease-in both;
}
@keyframes scaleUpOut {
  to { opacity: 0; transform: scale(1.2); }
}
@-webkit-keyframes scaleUpOut {
  to { opacity: 0; -webkit-transform: scale(1.2); }
}

.customPopup .scaleDownIn {
  animation: scaleDownIn 0.5s ease-in both;
  -webkit-animation: scaleDownIn 0.5s ease-in both;
}
.customPopup .scaleDownOut {
  animation: scaleOut 0.5s ease-in both;
  -webkit-animation: scaleOut 0.5s ease-in both;
}
@keyframes scaleDownIn {
  from { opacity: 0; transform: scale(1.2); }
}
@-webkit-keyframes scaleDownIn {
  from { opacity: 0; -webkit-transform: scale(1.2); }
}

.customPopup .slideIn {
  animation: slideIn 0.5s ease-in both;
  -webkit-animation: slideIn 0.5s ease-in both;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-50%); }
}
@-webkit-keyframes slideIn {
  from { opacity: 0; -webkit-transform: translateY(-50%); }
}

.customPopup .slideOut {
  animation: slideOut 0.5s ease-out both;
  -webkit-animation: slideOut 0.5s ease-out both;
}
@keyframes slideOut {
  to { opacity: 0; transform: translateY(50%); }
}
@-webkit-keyframes slideOut {
  to { opacity: 0; -webkit-transform: translateY(50%); }
}

.customPopup .slideLeftIn {
  animation: slideLeftIn 0.5s ease-in both;
  -webkit-animation: slideLeftIn 0.5s ease-in both;
}
@keyframes slideLeftIn {
  from { opacity: 0; transform: translateX(-50%); }
}
@-webkit-keyframes slideLeftIn {
  from { opacity: 0; -webkit-transform: translateX(-50%); }
}

.customPopup .slideLeftOut {
  animation: slideLeftOut 0.5s ease-out both;
  -webkit-animation: slideLeftOut 0.5s ease-out both;
}
@keyframes slideLeftOut {
  to { opacity: 0; transform: translateX(50%); }
}
@-webkit-keyframes slideLeftOut {
  to { opacity: 0; -webkit-transform: translateX(50%); }
}

.customPopup .flipLeftIn {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipLeftIn .5s both ease-out;
    -moz-animation: flipLeftIn .5s both ease-out;
    animation: flipLeftIn .5s both ease-out;
}
@-webkit-keyframes flipLeftIn {
    from {-webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: .2;}
}
@keyframes flipLeftIn {
    from {transform: translateZ(-1000px) rotateY(90deg);opacity: .2;}
}

.customPopup .flipLeftOut {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipLeftOut .5s both ease-in;
    -moz-animation: flipLeftOut .5s both ease-in;
    animation: flipLeftOut .5s both ease-in;
}

@-webkit-keyframes flipLeftOut {
    to {-webkit-transform: translateZ(1000px) rotateY(-90deg); opacity: 0;}
}
@keyframes flipLeftOut {
    to {transform: translateZ(1000px) rotateY(-90deg); opacity: 0;}
}

.customPopup .flipRightIn {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipRightIn .5s both ease-out;
    -moz-animation: flipRightIn .5s both ease-out;
    animation: flipRightIn .5s both ease-out;
}
@-webkit-keyframes flipRightIn {
    from {-webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: .2;}
}
@keyframes flipRightIn {
    from {transform: translateZ(-1000px) rotateY(-90deg);opacity: .2;}
}

.customPopup .flipRightOut {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipRightOut .5s both ease-in;
    -moz-animation: flipRightOut .5s both ease-in;
    animation: flipRightOut .5s both ease-in;
}

@-webkit-keyframes flipRightOut {
    to {-webkit-transform: translateZ(1000px) rotateY(90deg); opacity: 0;}
}
@keyframes flipRightOut {
    to {transform: translateZ(1000px) rotateY(90deg); opacity: 0;}
}


.customPopup .rotateIn {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: rotateIn .5s both ease-out;
    -moz-animation: rotateIn .5s both ease-out;
    animation: rotateIn .5s both ease-out;
}
@-webkit-keyframes rotateIn {
    from { -webkit-transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0;}
}
@-moz-keyframes rotateIn {
    from {-moz-transform: translateZ(-3000px) rotateZ(-360deg);opacity: 0;}
}
@keyframes rotateIn {
    from {transform: translateZ(-3000px) rotateZ(-360deg);opacity: 0;}
}

.customPopup .rotateOut {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: rotateOut .5s both ease-in;
    -moz-animation: rotateOut .5s both ease-in;
    animation: rotateOut .5s both ease-in;
}
@-webkit-keyframes rotateOut {
    to {-webkit-transform: translateZ(-3000px) rotateZ(360deg);opacity: 0;}
}
@-moz-keyframes rotateOut {
    to {-moz-transform: translateZ(-3000px) rotateZ(360deg);opacity: 0;}
}
@keyframes rotateOut {
    to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0;}
}

.customPopup .rotateCubeIn {
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: rotateCubeIn .6s both ease-in;
    -moz-transform-origin: 50% 100%;
    -moz-animation: rotateCubeIn .6s both ease-in;
    transform-origin: 50% 100%;
    animation: rotateCubeIn .6s both ease-in;
}
@-webkit-keyframes rotateCubeIn {
    0% {opacity: .3;
        -webkit-transform: translateY(-100%) rotateX(90deg);}
    50% {-webkit-animation-timing-function: ease-out;
        -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
}
@-moz-keyframes rotateCubeIn {
    0% {opacity: .3;
        -moz-transform: translateY(-100%) rotateX(90deg); }
    50% {-moz-animation-timing-function: ease-out;
        -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);}
}
@keyframes rotateCubeIn {
    0% {opacity: .3;
        transform: translateY(-100%) rotateX(90deg);}
    50% {animation-timing-function: ease-out;
        transform: translateY(-50%) translateZ(-200px) rotateX(45deg);}
}

.customPopup .rotateCubeOut {
    -webkit-transform-origin: 50% 0;
    -webkit-animation: rotateCubeOut .6s both ease-in;
    -moz-transform-origin: 50% 0;
    -moz-animation: rotateCubeOut .6s both ease-in;
    transform-origin: 50% 0;
    animation: rotateCubeOut .6s both ease-in;
}
@-webkit-keyframes rotateCubeOut {
    50% {-webkit-animation-timing-function: ease-out;-webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);  }
    100% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); }
}
@-moz-keyframes rotateCubeOut {
    50% { -moz-animation-timing-function: ease-out;-moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);  }
    100% { opacity: .3;-moz-transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateCubeOut {
    50% {animation-timing-function: ease-out;
        transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
    100% { opacity: .3; transform: translateY(100%) rotateX(-90deg);}
}

/* Demo Styles */

.customPopup a {
  color: rgb(0, 159, 211);
  text-decoration: none;
}
.customPopup .btn {
  background: rgb(0, 159, 211);
  color: #fff;
  border: 1px solid;
  display: inline-block;
  padding: 5px 20px;margin-bottom: 5px;
}
.customPopup .btn:hover {
  background: #fff;
  color: rgb(0, 159, 211);
}
.customPopup .popup {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;
}
.customPopup .popup-content {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

JS

 (function($) {
  $.fn.openPopup = function( settings ) {
    var elem = $(this);
    // Establish our default settings
    var settings = $.extend({
      anim: 'fade'
    }, settings);
    elem.show();
    elem.find('.popup-content').addClass(settings.anim+'In');
  }
  
  $.fn.closePopup = function( settings ) {
    var elem = $(this);
    // Establish our default settings
    var settings = $.extend({
      anim: 'fade'
    }, settings);
    elem.find('.popup-content').removeClass(settings.anim+'In').addClass(settings.anim+'Out');
    
    setTimeout(function(){
        elem.hide();
        elem.find('.popup-content').removeClass(settings.anim+'Out')
      }, 500);
  }
    
}(jQuery));

// Click functions for popup
$('.open-popup').click(function(){
  $('#'+$(this).data('id')).openPopup({
    anim: (!$(this).attr('data-animation') || $(this).data('animation') == null) ? 'fade' : $(this).data('animation')
  });
});
$('.close-popup').click(function(){
  $('#'+$(this).data('id')).closePopup({
    anim: (!$(this).attr('data-animation') || $(this).data('animation') == null) ? 'fade' : $(this).data('animation')
  });
});

// To open/close the popup at any functions call the below
// $('#popup_default').openPopup();
// $('#popup_default').closePopup();

Modal Window (Pop Up)

Modal Heading

Description

Setup

HTML

Click buttons to open popups

Popup 1

Popup 2

Popup 3

Popup 4

Popup 5

Popup 6

Popup 7

Popup 8

Popup 9

Popup 10

HTML

Default Modal

Scale Modal

CSS

JS