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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <div role="dialog" class="Dialog u-posFixedCenter">
<img src="https://placekitten.com/600/400" alt="" />
</div>
<div class="Cover u-posFullScreen"></div>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sapien, fermentum et libero at, tristique aliquet dui. Donec sit amet lorem neque. Donec ullamcorper dolor sed faucibus facilisis. Donec condimentum consectetur mi, a accumsan ex placerat eu. Pellentesque in elementum nisl, eget lacinia leo. Vivamus eu neque lorem. Sed consequat ex elit. Cras mattis sodales lectus sed ultrices. Aenean auctor et erat sit amet iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer viverra, nisl a accumsan pellentesque, ligula dui auctor purus, id aliquet dui mi sit amet libero. Suspendisse lacinia erat a turpis aliquet malesuada. Donec mauris neque, congue ac fermentum sodales, semper eu elit. Nulla facilisi. Sed sit amet tellus sed eros maximus interdum.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam euismod, tellus sed dictum gravida, felis lorem interdum sem, vel lacinia neque ipsum id erat. Curabitur tristique velit non cursus pretium. Ut nec sapien nec ipsum aliquam feugiat sed ac arcu. Morbi a condimentum arcu. Nullam auctor nisl at risus finibus ultricies. Nullam ultrices, nisi eget egestas laoreet, elit nisi mattis leo, sed sagittis elit libero ac velit. Aenean in viverra purus. Phasellus nunc tellus, auctor eget neque eu, laoreet faucibus est. Fusce luctus, lectus vitae suscipit dignissim, dui est vestibulum nibh, nec laoreet felis mi quis ipsum. Nam id mauris at ante faucibus convallis vel sit amet justo. Proin eleifend varius elit, sed aliquet tellus suscipit id. Donec non ipsum ligula.</p>

<p>Nunc neque ex, ullamcorper nec auctor id, pharetra et nunc. Nullam a est efficitur, placerat nulla non, viverra felis. Aliquam quam odio, finibus quis leo vel, tristique placerat mauris. Quisque finibus sodales nulla, vel elementum arcu molestie id. Curabitur sollicitudin mi eu tellus pulvinar laoreet. Mauris et lacus pharetra, rhoncus augue sit amet, euismod tellus. Praesent facilisis, nulla non fringilla scelerisque, nulla nulla vehicula lacus, a dapibus eros eros at diam. Sed venenatis congue elit, id euismod risus pellentesque sed. Aenean ac massa at dui vulputate tincidunt. Integer molestie nunc ut ultricies viverra. Nullam ullamcorper nisl eu felis aliquam imperdiet eget id turpis. Donec efficitur sapien nec nisl suscipit, non accumsan leo tempus. Etiam vel faucibus urna, vitae aliquam ante. Pellentesque eleifend in sapien a elementum. Fusce tincidunt, mauris sed porttitor tristique, augue urna pharetra nisl, in feugiat nulla orci at metus. Curabitur porttitor porta ultricies.</p>

<p style="margin-top: 300px">Fusce ultricies velit velit, vitae ornare mi ultricies ac. Curabitur non sollicitudin orci. Donec et elit non sem rutrum mattis. Phasellus auctor dui vitae nibh laoreet blandit. Nam dapibus enim risus, ac mattis ante ullamcorper sed. Nunc cursus eros nec dignissim aliquet. Vivamus eu aliquam nibh. Morbi enim elit, mattis id laoreet et, varius sit amet enim. Nunc nibh nisi, auctor eget nulla suscipit, eleifend tristique nisi. Aenean magna ligula, pharetra nec imperdiet bibendum, pellentesque vitae metus. Nunc commodo suscipit justo eget interdum. Vivamus ultricies mi et hendrerit laoreet. Vivamus pellentesque mi nec ipsum lobortis, eu efficitur sapien lacinia. Duis imperdiet consectetur rutrum. Sed lacinia nulla ac turpis pellentesque, eget fringilla leo luctus.</p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam arcu turpis, accumsan et commodo vitae, congue sed mauris. Donec vel ultricies felis. Curabitur sit amet massa pulvinar, molestie risus eu, sodales felis. Suspendisse efficitur leo quis neque varius tincidunt. Sed sit amet elit et orci viverra facilisis et id lorem. Integer elementum tortor at volutpat molestie. Fusce rhoncus aliquam nulla. Etiam fringilla ultricies dolor, ut vestibulum enim lobortis ut. Nulla facilisi. Nunc pulvinar iaculis risus, sit amet dignissim sapien venenatis et. Nunc egestas quis lorem ut commodo.</p>
              
            
!

CSS

              
                .u-posFit,
.u-posAbsoluteCenter,
.u-posAbsolute {
  position: absolute !important;
}

/**
 * Element will be centered to its nearest relatively-positioned
 * ancestor.
 */

.u-posFixedCenter,
.u-posAbsoluteCenter {
  left: 50% !important;
  top: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
      -ms-transform: translate(-50%, -50%) !important;
          transform: translate(-50%, -50%) !important;
}

.u-posFit,
.u-posFullScreen {
  bottom: 0 !important;
  left: 0 !important;
  margin: auto !important;
  right: 0 !important;
  top: 0 !important;
}

/**
 * 1. Make sure fixed elements are promoted into a new layer, for performance
 *    reasons.
 */

.u-posFullScreen,
.u-posFixedCenter,
.u-posFixed {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; /* 1 */
  position: fixed !important;
}

.u-posRelative {
  position: relative !important;
}

.u-posStatic {
  position: static !important;
}


.Dialog {
  z-index: 2;
  padding: 10px;
  background-color: #fff;
}

.Cover {
  background-color: rgba(0,0,0,.85);
  z-index: 1;
}

body {
  height: 1000px;
}
              
            
!

JS

              
                
              
            
!
999px

Console