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
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  #wrapper{
    position:absolute;
    padding:20px;
    color: transparent;
    text-shadow:0px 0px 0px #000;
  }
  
  
#lightbox{
    display:none;
    position:absolute;
    z-index:1000;
    background:url(http://images3.wikia.nocookie.net/__cb20110703044636/umemaro3d/images/b/b4/Bg-white-50.png);
    width:100%;
    height:100%;
}
#lightbox_area{
    position:relative;
    margin:50px auto;
    background:#fff;
    width:400px;
    height:300px;
    padding:23px;
    border:1px solid #444;
    border-radius:20px;
}
  .open{
    cursor:pointer;
  }
  .close{
    cursor:pointer;
    border:1px solid #444;
    width:25px;
    height:25px;
    line-height:24px;
    border-radius:20px;
    text-align:center;
    position:absolute;
    right:-8px;
    top:-28px;
    background:#e11;
    color:#fff;
  }
</style>
</head>
<body>
​
<div id="lightbox">
  <div id="lightbox_area">
    <h2>Area title</h2>
    <p>Area content...</p>
    <p class="close"><b>X</b></p>
  </div>
</div>
​
  
  
  
  
  
<div id="wrapper">
  
  <h1>PAGE TITLE</h1>
  <p class="open">CLICK HERE!</p>
In blandit fermentum lectus, eget interdum sapien ornare eu. Sed gravida sagittis mollis. Vivamus eget ante urna, in pulvinar tortor. Curabitur posuere enim in risus ullamcorper id cursus magna bibendum. Sed ac massa nisi, ut commodo nibh. Etiam euismod malesuada tempus. Suspendisse fermentum lacinia facilisis. Proin nec sem sodales metus molestie hendrerit. Aliquam eu lacus at quam tempus condimentum. Nunc vel lacus felis.
Donec imperdiet eleifend metus sit amet congue. Nulla commodo nibh ut nulla tincidunt a pulvinar erat commodo. Nulla facilisi. Nulla mauris tortor, sagittis id euismod vestibulum, consequat ac eros. Morbi vitae massa id purus commodo gravida vel sit amet lectus. Suspendisse potenti. Aliquam condimentum, nulla at pharetra gravida, odio lectus elementum nisi, ut rutrum turpis libero sit amet lacus.
Integer volutpat est a purus semper vitae pellentesque neque gravida. Duis nisl lacus, rutrum ut ullamcorper vitae, convallis quis nisi. Quisque interdum pellentesque viverra. Quisque ullamcorper vehicula tortor id pretium. Cras et scelerisque orci. Fusce pulvinar quam at neque varius at congue lectus tincidunt. Suspendisse vestibulum dictum orci a dictum. Nullam arcu erat, hendrerit in ullamcorper non, pulvinar id felis. Maecenas accumsan feugiat massa, ac bibendum lorem accumsan et. Fusce bibendum urna neque, ac volutpat quam. Donec erat sem, tempus ut sollicitudin sed, tempus a odio. In accumsan enim eu urna varius in commodo leo blandit. In nec tempor nisl. Morbi ultrices hendrerit justo, at malesuada eros ornare at. Etiam faucibus, tortor eu tempor mollis, purus risus commodo velit, a porta tellus turpis quis nunc. Duis nec iaculis erat.
Etiam est eros, mattis ac dapibus non, tristique vitae nisi. Proin ac libero quis ligula faucibus semper vitae nec erat. Fusce massa risus, tempus vitae ultricies nec, aliquet non ipsum. Nulla bibendum, velit sit amet tincidunt pharetra, nisi dolor hendrerit lacus, eget tristique risus tellus sit amet nunc. Sed sit amet nibh magna. Aliquam erat volutpat. In hac habitasse platea dictumst. Praesent hendrerit felis quis nunc feugiat tincidunt
Etiam at eros at nunc tincidunt tristique quis et felis. Mauris eu lectus augue, lobortis tincidunt quam. Aliquam erat volutpat. Vivamus auctor porta nisi, in iaculis ipsum vestibulum non. Sed lacus purus, scelerisque quis accumsan sit amet, hendrerit id risus. Duis nec urna orci. Pellentesque sed erat ante, ac facilisis purus. Nam mi lectus, semper eu congue a, laoreet quis neque. Sed turpis purus, gravida in blandit sed, sagittis sed neque. Quisque id nulla a magna congue feugiat. Aenean accumsan sagittis lorem, vitae viverra eros porttitor vel. Quisque dictum orci quis nisl rhoncus a bibendum tellus faucibus
Ut tellus nisi, tempus et blandit sit amet, lacinia eget est. Maecenas ut lacus nibh, vel imperdiet diam. Nulla placerat fermentum ante, in pulvinar sapien faucibus non. Curabitur quis nunc nisi, ut luctus massa. Donec vehicula cursus facilisis. In mauris lorem, posuere id elementum id, suscipit et purus. Praesent sed arcu purus. Ut venenatis gravida urna et pellentesque. Suspendisse sed leo eu purus sollicitudin pulvinar. Donec non dolor sit amet est tristique sodales sit amet vitae sem. Nunc varius porttitor rutrum. Nullam scelerisque turpis quis purus sodales id pretium nulla consequat. Cras odio diam, blandit at congue et, ornare ac enim.
</div>
  
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers