Popup

by Milan Gladiš

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  
</body>

SCSS

body, html {
  width: 100vw;
  height: 100vh;
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
}

.popup {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  font-size: 1.4rem;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-window {
  background-color: #fff;
  border-radius: 2rem;
  padding: 3rem;
  box-shadow: 0 2rem 4rem -2rem rgba(0,0,0,0.4);
  max-width: 80vw;
}

.popup-content {
  padding: 2rem 0;
}

JavaScript

$(document).ready(function(){
  $('body').append('<div class="popup"></div>');
  $('.popup').append('<div class="popup-window"></div>');
  $('.popup-window').append('<div class="popup-header"></div><div class="popup-content"></div><div class="popup-footer"></div>');
  
  $('.popup-header').append('<h5>Buy Subscription</h5>');
  $('.popup-content').append('Hello there, Thank you really much for your subscription. You can cancel it anytime you want in your settings');
  $('.popup-footer').append('<button>Agree</button>');
  
  
  
  
  $('.asdf').on('click', function(){
    alert('asdf');
  });
});