Centered message fade into focus

This will fade website to black, and show a centered message.

JavaScript:

var heroHTML = '

Ferie!

Jeg har tatt ferie og er tilbake i august. God sommer!

Kontakt meg på epost

'; var blackHTML = '
'; $(document).ready(function(){ $('body').append(heroHTML); $('body').append(blackHTML); $('.black').fadeTo(1000, 0.5); setTimeout(function(){ $('.hero-unit').fadeTo(1000, 1); }, 1000); $('.hero-unit').css('margin-top', ($(window).height() - $('.hero-unit').outerHeight())/2 + 'px' ); $('.hero-unit').css('margin-left', ($(window).width() - $('.hero-unit').outerWidth())/2 + 'px' ); $(window).resize(function(){ $('.hero-unit').css('margin-top', ($(window).height() - $('.hero-unit').outerHeight())/2 + 'px' ); $('.hero-unit').css('margin-left', ($(window).width() - $('.hero-unit').outerWidth())/2 + 'px' ); }); $('body').on('click', function(){ if ($('.black').length){ $('.black').fadeTo(1000, 0); $('.hero-unit').fadeTo(1000, 0, function(){ $(this).remove(); $('.black').remove(); }); } }); });

Stylesheet/CSS:

.hero-unit {
  border-radius: 10px;
  background-color: #eee;
  padding: 60px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
}
.black {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0;
  z-index: 998;
}
.btn {
  border: 1px solid #cccccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 10px;
  text-decoration: none !important;
  color: black !important;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>