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>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  
  <div class="wrap"><div class="greyOut"></div><div class="dialog" style="width: 500px;">
    
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum dolorem, reprehenderit earum dolores cumque autem numquam temporibus alias accusamus perspiciatis mollitia, itaque saepe consectetur adipisci quisquam deserunt quis ad aperiam.</p>
   <p>Vel temporibus vero neque, autem aspernatur quam laudantium corporis enim ex suscipit corrupti, quasi officiis quibusdam, sit repudiandae necessitatibus nostrum repellendus iure quisquam nulla voluptate fuga quod maiores! Illum, est!</p>
   <p>Aspernatur suscipit laborum reprehenderit earum, officiis, dolor neque temporibus mollitia corporis. Provident vel quis quod expedita deserunt culpa ex atque labore nihil voluptatum veniam minus, nemo nostrum fugiat facere quia.</p>
   <p>Praesentium quos vitae voluptas velit error recusandae delectus hic, facere nemo autem, perspiciatis cumque qui sed dolor officiis animi modi! Dolore hic, placeat itaque? Amet doloribus officia porro ipsam dignissimos.</p>
   <p>Laborum nam quaerat, amet, voluptates, cumque facilis quos accusamus dicta dolorum voluptatem quasi inventore minus qui quam sit incidunt. Debitis necessitatibus fuga, temporibus repudiandae nobis, est deleniti delectus doloremque magni?</p>
   <p>Consequatur, perspiciatis, praesentium reiciendis aspernatur laudantium veritatis nesciunt sed id cupiditate inventore velit nobis eligendi provident incidunt, impedit vitae iste odit? Non reprehenderit, ullam nihil modi repudiandae laudantium porro accusamus.</p>
   <p>Veritatis porro, perspiciatis mollitia maxime voluptatum consectetur cupiditate quam recusandae a consequatur officiis quas, dicta esse iusto minus ratione reiciendis impedit nam alias eveniet nobis. Ex dolorem eveniet voluptate necessitatibus!</p>
   <p>Eligendi dolorem voluptatem facere, cupiditate fugit praesentium consectetur velit explicabo, esse distinctio unde amet pariatur rerum, recusandae cum. Aperiam porro expedita commodi ipsam, rem vero officiis tempore. Obcaecati, eaque dolorum.</p>
   <p>Fugit reiciendis, nam illo libero autem quo rerum incidunt quis in deserunt, expedita doloremque! Qui rem hic quibusdam magnam debitis aliquam accusantium harum dolorem libero? Pariatur corporis similique voluptatum ipsam.</p>
   <p>Esse, dolorem ducimus nostrum id earum perspiciatis voluptatem culpa molestias voluptas excepturi odit maxime, expedita recusandae voluptatibus eaque doloremque vel nobis est assumenda illo quasi, debitis incidunt commodi. Labore, magni!</p>
   <p>Ut fugit praesentium quasi cumque libero distinctio exercitationem aperiam est quod inventore, ipsam hic aliquid perferendis voluptatibus, nemo aliquam, esse quia laboriosam cum? Maiores esse aut ullam accusantium, alias. Labore!</p>
   <p>Dicta consectetur quo, modi quisquam, esse natus ipsa nobis unde eligendi, iste accusamus doloribus quaerat facilis impedit accusantium recusandae quia quae autem aperiam debitis quas perspiciatis nihil. Autem, accusantium, ipsa.</p>
   <p>Voluptate, quas tempora adipisci repellat quisquam soluta, nisi sed consequatur nemo beatae hic fugit ex quaerat in itaque exercitationem, culpa libero assumenda distinctio, temporibus fuga officiis vero. Facere, fugit quibusdam.</p>
   <p>Vel ad, soluta autem quod voluptate, praesentium asperiores est nostrum accusamus qui fugiat earum facilis reiciendis ducimus iure perspiciatis quisquam! Fuga harum culpa, atque sed! Ut esse, eveniet. Similique, veritatis.</p>
   <p>Officiis nobis assumenda nemo quaerat ratione, maxime adipisci doloribus fugit odit sequi reiciendis sed quam, sunt eius odio. Nesciunt, quos repudiandae quo aperiam iure provident beatae ratione culpa deleniti consequatur.</p>
   <p>Quam, placeat accusantium sed dolore delectus aliquam provident ea. Culpa omnis nulla, perferendis nostrum nihil distinctio rerum. Eveniet iste, debitis voluptates, voluptas laudantium quas, esse, numquam eius soluta fugit sint.</p>
   <p>Molestiae officia optio reprehenderit sequi dolorum placeat, tempore natus expedita, ullam inventore non quod, eaque aut magnam officiis. Ad corrupti, rerum cumque ipsam maiores suscipit dolor numquam qui ratione quo.</p>
   <p>Saepe animi, voluptates natus nobis, illum iste nostrum. Assumenda sed praesentium neque nemo amet blanditiis fugiat architecto ad nobis voluptas esse repudiandae accusantium, officia quas aspernatur saepe similique dolor cupiditate.</p>
   <p>Accusantium, unde, molestiae! Eveniet voluptas, tempore voluptatem blanditiis, quam sint, unde fuga molestias delectus eum assumenda magni. Error, deleniti ex, vel eius nesciunt voluptatum aut laudantium aliquam pariatur rerum, consequuntur?</p>
   <p>Nemo ad quis alias possimus repellendus quo accusantium eos accusamus mollitia nulla consequuntur delectus perferendis expedita, aut ut cum sint a porro error cumque enim debitis. Ea cumque adipisci doloremque.</p>
    
    
    </div></div></div>
​
</body>
</html>
 
@zIndex: 100;
​
.greyOut {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: black;
        opacity: 0.5;
    }
    .wrap {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: @zIndex;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
    }
    .dialog {
        background-color: white;
        padding: 5px;
        border-radius: 3px;
        z-index: @zIndex;
        //max-width: calc(100% - 20px);
        margin: 10px;
        box-shadow: 2px 2px 4px rgba(0,0,0,.5);
    }
Output

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

Dismiss x
public
Bin info
mnpennerpro
0viewers