OK pop-up red

by katalin_2003

HTML

<div class="box">
  <div style="margin-top: 1em; font-size: 4em; font-family: Verdana, Geneva, sans-serif;">OK</div>
</div>

CSS

html {
  background-color: black;
}

.box {
  width: 200px;
  height: 200px;
  background-color: gray;
  display: none;
  text-align: center;
  color: white;
  border-radius: 10%;
}

JavaScript

// Small plugin to center any element.
jQuery.fn.center = function() {

  this.css("position", "absolute");
  this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
    $(window).scrollTop()) + "px");
  this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
    $(window).scrollLeft()) + "px");
  return this;
};

// Call the .center(); function to the ".box" div.
// This can be used to center anything. just use .center(); on any element.
$('.box').center();

// When the window is resized, center the div to adjust to the resize.
$(window).resize(function() {
  $('.box').center();
});

// Now call the jQuery UI animation.
$('.box').fadeIn(1000
  /*$('.box').show("scale", 1000
      ,function() {
          $('.box').delay(3000).hide("scale", 1000);
          // on Animation Complete, do something.
      }*/
);