Created
April 13, 2015 19:57
-
-
Save mstriemer/a975a8187c55af89a5a5 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/xixoyawa/3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| * { box-sizing: border-box } | |
| body { | |
| height: 200%; | |
| } | |
| body.overlayed { | |
| overflow: hidden; | |
| position: fixed; | |
| } | |
| .modal { | |
| position: fixed; | |
| background: blue; | |
| top: 10px; | |
| left: 10px; | |
| right: 10px; | |
| bottom: 10px; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| pointer-events: none; | |
| max-width: 100%; | |
| max-height: 100%; | |
| opacity: 0; | |
| } | |
| .modal.show { | |
| opacity: 1; | |
| } | |
| button { | |
| z-index: 100; | |
| position: fixed; | |
| } | |
| .cloak { | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| position: fixed; | |
| height: 100%; | |
| width: 100%; | |
| background: rgba(0,0,0,0.75); | |
| overflow: hidden; | |
| pointer-events: none; | |
| opacity: 0; | |
| max-width: 100%; | |
| max-height: 100%; | |
| } | |
| .cloak.show { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="cloak"></div> | |
| <div class="modal"></div> | |
| <button id="toggle">Toggle Modal</button> | |
| <p>Te per semper graecis feugait. Ut quaeque hendrerit dissentiunt eos, ea sapientem gubergren percipitur nec. Ignota appetere ex vix, ne mea quem porro, sed cu tantas deserunt. Nostrud graecis vivendo mel ad.</p> | |
| <p>Ad numquam repudiandae eos. Ad vel atqui quidam doctus, eum maiorum nominavi indoctum ea, ut nec utroque graecis. Est simul nusquam ea. Cu qui nobis impetus sadipscing, homero albucius imperdiet usu ea. Ex sit copiosae invidunt temporibus.</p> | |
| <p>An populo animal duo, nibh cetero vulputate nam ea, delenit probatus indoctum pro ne. Eos mazim audiam ocurreret an. No cibo meliore eam. Nisl labore efficiendi te vel.</p> | |
| <p>Fuisset volutpat constituto no pri, per aliquam concludaturque no. Mutat inermis ius te. Volumus dissentias et mel, hinc delicata signiferumque ex his, assum denique pro ea. Ad his adhuc blandit voluptua. Appareat adolescens delicatissimi ei qui.</p> | |
| <p>Ex facilis delectus per, at aliquam labores complectitur sit, pro et idque facilis voluptua. Mea posse audiam moderatius ne. Sit ne stet lorem persius, sed dicant eleifend ea. At eum malis apeirian dissentiet, no ius postulant adipiscing contentiones, persius erroribus et pri.</p> | |
| <script id="jsbin-javascript"> | |
| $('#toggle').on('click', function() { | |
| console.log('hai'); | |
| $('.cloak').toggleClass('show'); | |
| $('.modal').toggleClass('show'); | |
| $('body').toggleClass('overlayed'); | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css"> | |
| * { box-sizing: border-box } | |
| body { | |
| height: 200%; | |
| } | |
| body.overlayed { | |
| overflow: hidden; | |
| position: fixed; | |
| } | |
| .modal { | |
| position: fixed; | |
| background: blue; | |
| top: 10px; | |
| left: 10px; | |
| right: 10px; | |
| bottom: 10px; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| pointer-events: none; | |
| max-width: 100%; | |
| max-height: 100%; | |
| opacity: 0; | |
| } | |
| .modal.show { | |
| opacity: 1; | |
| } | |
| button { | |
| z-index: 100; | |
| position: fixed; | |
| } | |
| .cloak { | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| position: fixed; | |
| height: 100%; | |
| width: 100%; | |
| background: rgba(0,0,0,0.75); | |
| overflow: hidden; | |
| pointer-events: none; | |
| opacity: 0; | |
| max-width: 100%; | |
| max-height: 100%; | |
| } | |
| .cloak.show { | |
| opacity: 1; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">$('#toggle').on('click', function() { | |
| console.log('hai'); | |
| $('.cloak').toggleClass('show'); | |
| $('.modal').toggleClass('show'); | |
| $('body').toggleClass('overlayed'); | |
| });</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { box-sizing: border-box } | |
| body { | |
| height: 200%; | |
| } | |
| body.overlayed { | |
| overflow: hidden; | |
| position: fixed; | |
| } | |
| .modal { | |
| position: fixed; | |
| background: blue; | |
| top: 10px; | |
| left: 10px; | |
| right: 10px; | |
| bottom: 10px; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| pointer-events: none; | |
| max-width: 100%; | |
| max-height: 100%; | |
| opacity: 0; | |
| } | |
| .modal.show { | |
| opacity: 1; | |
| } | |
| button { | |
| z-index: 100; | |
| position: fixed; | |
| } | |
| .cloak { | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| position: fixed; | |
| height: 100%; | |
| width: 100%; | |
| background: rgba(0,0,0,0.75); | |
| overflow: hidden; | |
| pointer-events: none; | |
| opacity: 0; | |
| max-width: 100%; | |
| max-height: 100%; | |
| } | |
| .cloak.show { | |
| opacity: 1; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('#toggle').on('click', function() { | |
| console.log('hai'); | |
| $('.cloak').toggleClass('show'); | |
| $('.modal').toggleClass('show'); | |
| $('body').toggleClass('overlayed'); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment