Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1 class="codepen">Windows 8 style modal</h1>
<div class="codepen">
  <button onclick="modal('hello there.')">Plain text example</button>
</div>
<p class="codepen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse est augue, fringilla et est ut, egestas varius nisi. Nam quis arcu bibendum, elementum dui non, molestie arcu. Proin rhoncus semper orci, at porttitor leo placerat nec. Mauris tristique sem ac ultricies cursus. Sed pulvinar urna justo, ac bibendum nibh mattis sit amet. Phasellus sed lectus nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus at ante sollicitudin, ornare erat a, adipiscing ligula. Aenean vel malesuada quam. Nunc consequat sodales est, eu vestibulum odio tristique eget. Nulla facilisi. Nam elit nisi, bibendum non lacus eu, elementum tincidunt quam.
</p>
<div class="codepen">
  <button onclick="modal('<h4>Look i\'m HTML</h4><ul><li>Hello</li><li>Hello</li><li>Hello!</li></ul>')">HTML example</button>
</div>
<p class="codepen">
Praesent et dolor sed nulla egestas condimentum. Morbi ut porttitor dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec posuere arcu quis ultricies blandit. Pellentesque malesuada feugiat arcu eget auctor. Quisque adipiscing lacus urna, et vulputate nibh mollis ut. In tincidunt magna ut ipsum ultricies sodales. Phasellus sagittis odio odio, sit amet faucibus risus venenatis eget. Pellentesque id orci eleifend lectus porta pharetra. Maecenas non est lorem. Suspendisse sed pellentesque arcu. Fusce semper, sem id malesuada pretium, mauris nulla pretium enim, id pulvinar lorem ipsum et metus.
</p>
<p class="codepen">
Quisque semper, leo quis posuere vulputate, nisl est laoreet neque, quis lacinia libero risus laoreet elit. Donec malesuada urna at aliquam pellentesque. Donec ultrices risus eu risus pellentesque, id dictum nulla vulputate. Vestibulum at pretium ligula, a ullamcorper risus. Cras auctor urna eu dolor elementum, nec aliquet nulla molestie. Nulla ultricies lectus eget libero convallis cursus. Suspendisse vulputate facilisis metus, et volutpat mauris dictum a. Morbi fermentum massa id lacus molestie molestie. Suspendisse mollis dolor ut lectus rutrum varius. Suspendisse sed scelerisque lacus. Nam vehicula, neque eget dictum tristique, felis nisl dapibus nunc, a lobortis eros felis ut purus. Cras congue arcu nibh, pellentesque feugiat nibh aliquet et.
</p>
<p class="codepen">
Sed vitae molestie metus. Morbi quis laoreet urna, id tempor augue. Nullam sit amet mi tellus. Donec hendrerit molestie odio, non pretium est tempus non. Pellentesque quam risus, consequat vel sapien porta, commodo suscipit sem. Cras consequat volutpat arcu, ultrices auctor augue porta sit amet. Ut arcu neque, fringilla eget auctor vel, commodo a diam. Proin dolor dolor, consequat sodales nisl a, pulvinar pulvinar lacus. Nam tempor libero non nisl luctus consectetur.
</p>
<p class="codepen">
Cras vestibulum, magna ac accumsan dapibus, velit lorem semper dui, in feugiat sem neque sit amet metus. Vivamus condimentum nunc nulla, quis tincidunt urna volutpat sed. Donec pretium velit in turpis blandit auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dapibus lacinia tincidunt. Sed sed elit vel ipsum ultricies vulputate at sed ipsum. Quisque dignissim malesuada ligula, nec euismod eros hendrerit nec. 
</p>
              
            
!

CSS

              
                .modal-table{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  display: table;
}

.modal-cell{
  display: table-cell; 
  vertical-align: middle;
  background: rgba(0,0,0,0.90);
}

.modal-bar{
  width: 100%;
  background: #0f8845;
  color: white;
  /*margin: 0 auto;*/
}

.modal-content{
  width: 50%;
  padding: 1em;
  margin: 0 auto;
  position: relative;
}

.modal-content button{
  bottom: 1em;
  right: 1em;
  position: absolute;
}

/* Irrelevent styling */
@font-face{
  font-family: 'Open Sans Light';
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

body { height: 1000px; } /* Just to see scrolling working */

body{
  margin: 0;
  font-family: Open Sans;
}

*{ font-weight: lighter; }

.codepen{ 
  text-align: center; 
  font-weight: lighter;
  width: 50%;
  margin: 10px auto;
}

button
{
  border: 1px solid whitesmoke;
  color: white;
  background: #0f8845;
  padding: .25em .5em;
  cursor: pointer;
}
button:hover{
  background: #0da24e;
}
              
            
!

JS

              
                var modal = function(html)
{

  var modal_table   = $('<div />')    .addClass('modal-table'),
      modal_cell    = $('<div />')    .addClass('modal-cell')
                                      .appendTo(modal_table),
      modal_bar     = $('<div />')    .addClass('modal-bar')
                                      .appendTo(modal_cell),
      modal_content = $('<div />')    .addClass('modal-content')
                                      .html(html)
                                      .appendTo(modal_bar),
      button        = $('<button />') .appendTo(modal_content)
                                      .text("Okay")
                                      .click(function(){
                                        modal_table.remove();
                                      });

  $('body').append(modal_table);

}
  
modal("Hello");
              
            
!
999px

Console