newpopup

by sarathsprakash

HTML

<div id="overlay"></div>
  <div id="popup">
    <h3>Title</h3>
    <p>How is my popup</p>
    <div class="button-holder one-button">
      <a href="#">OK</a>
    </div>
    <div class="button-holder two-button">
      <a href="#">BUTTON ONE</a>
      <a href="#">BUTTON TWO</a>
      <div style="clear: both"></div>
    </div>
   
  </div>

CSS

#overlay {
  position: absolute;
  background: rgba(0,0,0,.3);
  top: 0; left: 0; right: 0; bottom: 0
}

#popup {
  font-family: Helvetica "Helvetica Nueue" Arial;
  width:84%;
  z-index: 10px;
  background:rgba(255,255,255,0.85);
  border-radius: 8px;
  margin:0 auto;
  text-align: center;
  box-sizing: border-box;
  margin-top: 20px;
  position: absolute;
}

#popup h3 {
  margin: 20px 0 0 0;
  padding: 0;
}

#popup p {
  margin: 15px;
  padding: 0;
}

#popup .button-holder a {
  color: #007AFF;
  text-decoration: none;
  line-height:45px;
  font-weight:bold;
  display: block;
  border-top: 1px solid #BABABA;
}

#popup .two-button a{
  width: 50%;
  float: left;
  box-sizing: border-box
}

#popup .two-button a:first-child {
  border-right: 1px solid #BABABA
}

JavaScript

$(document).ready(function(){
  "use strict";
var screen = $(window);
      popup = $('#popup');
popup
.css("top", Math.max(0, ((screen.height() - popup.outerHeight()) / 2) + screen.scrollTop()) + "px")
.css("left", Math.max(0, ((screen.width() - popup.outerWidth()) / 2) + screen.scrollLeft()) + "px");
    
    
});