A Pen by Andrea Rufo.

A-simple-html+css-popup-at-page-open.markdown

A simple html+css popup at page open

When you open the page, a series of divs appears over your content with important messages or images. You can close it with a simple click !

A Pen by Andrea Rufo on CodePen.

License.

index.html

  <div id="hover"></div>

  <div id="popup">
    <div id="close">X</div>
    
    <div id="tweet"><img src="http://crebs.it/wp-content/themes/crebs/images/bird.gif" /></div>
    <h2>Follow me on Twitter!</h2>
    
    <a href="https://twitter.com/andrearufo" class="twitter-follow-button" data-show-count="false" data-lang="it">Segui @andrearufo</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    
  </div>

<div id="container">
  
<h1>Pure HTML+CSS+jQuery modal popup by Orange Drop Design</h1>
  
  <p>Original tutorial by Andrea Rufo on <a href="http://www.orangedropdesign.com/popup-in-puro-html-css-e-jquery-allapertura-della-pagina/">www.orangedropdesign.com</a></p>

<p>Quisque eget odio <a href="#">ac lectus vestibulum faucibus eget</a> in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
  
</div>

script.js

$(document).ready(function(){
  
  //chiusura al click sulla parte scura
  $("#hover").click(function(){
		$(this).fadeOut();
    $("#popup").fadeOut();
	});
  
  //chiusura al click sul pulsante
  $("#close").click(function(){
		$("#hover").fadeOut();
    $("#popup").fadeOut();
	});
  
});

style.css

#container{
  width:960px;
  margin:auto;
  padding:20px;
}

p{
  margin-bottom:20px;
  line-height:24px;
}

h1, h2{
  color:orange;
  font-size:24px;
  margin-bottom:20px;
  font-weight:bold;
  margin:20px 0;
}

#hover{
  position:fixed;
  background:#000;
  width:100%;
  height:100%;
  opacity: .6
}

#popup{
  position:absolute;
  width:600px;
  height:180px;
  background:#fff;
  left:50%;
  top:50%;
  border-radius:5px;
  padding:60px 0;
  margin-left:-320px; /* width/2 + padding-left */
  margin-top:-150px; /* height/2 + padding-top */
  text-align:center;
  box-shadow:0 0 10px 0 #000;
}

#close{
  position:absolute;
  background:black;
  color:white;
  right:-15px;
  top:-15px;
  border-radius:50%;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  font-size:8px;
  font-weight:bold;
  font-family:'Arial Black', Arial, sans-serif;
  cursor:pointer;
  box-shadow:0 0 10px 0 #000;
}