Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<button id = "abrir">PopUp</button>
<div id = "fondo"></div>
<div id = "contenido">
  Hola mundo
  <button id = "cerrar"> X </button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
body {
  margin: 0;  
}
​
#fondo {
  display: none;
  width: 100%;
  height: 100%; 
  background: #000;
  opacity: .9;
  position: absolute;
  top: 0;
}
​
#contenido {
  display: none;
  width: 50em;
  height: 30em;
  margin: -15em 0 0 -25em;
  top: 50%;
  left: 50%;
  position: absolute;
  background: #fff;
  text-align: center;
}
​
#cerrar {
  position: absolute;
  top: 1%;
  right: 1%;
  margin: 0;
}
​
#cerrar:hover {
  cursor: pointer;
}
 
$("#abrir").click(function(){
  $("#fondo, #contenido").fadeIn(1000);
});
​
$("#cerrar").click(function(){
  $("#fondo, #contenido").fadeOut(1000);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers