<html> <head> <title>CSS Fullscreen Modal Example</title> <style type="text/css"> body { height: 100%; } body { font-family: Helvetica, Arial, sans-serif; padding: 2rem; background-color: #5A7A9B; color: #000000 } a { color: inherit; } .container { display: table; width: 100%; height: 100%; } .interior { display: table-cell; vertical-align: middle; text-align: center; } .btn { background-color: #ffffff; padding: 1em 3em; border-radius: 3px; text-decoration: none; } #button { position: absolute; z-index: 2; left: 20px; top: 150px; } .modal-window { position: fixed; background-color: rgba(255, 255, 255, 0.15); background-image: url('bg.jpg'); background-repeat: no-repeat; background-size: 100% 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; opacity: 0; pointer-events: none; } .modal-window:target { opacity: 1; pointer-events: auto; } .modal-window>div { width: 400px; position: relative; margin: 10% auto; padding: 2rem; background: #fff; color: #444; } .modal-window header { font-weight: bold; } .modal-close { color: #aaa; line-height: 50px; font-size: 80%; right: 0; text-align: center; top: 0; width: 700px; text-decoration: none; } .modal-close:hover { color: #000; } .modal-window h1 { font-size: 150%; margin: 0 0 15px; } </style> </head> <body> <div class="container"> <div class="interior"> <a class="btn" href="#open-modal">Click to Open a CSS Fullscreen Modal Example</a> </div> </div> <div id="open-modal" class="modal-window"> <h3 style="text-align: center;">This modal window/div contains a fullscreen image.<br> That image is assigned a z-index value of 1.<br> The button image is assigned a z-index value of 2 <br>and is therefore visible on top of the fullscreen image. <br>Define its absolute position for placement.</h3> <div style="background: #ffffff; color: #FFDE16; padding: 5px; width: 300px; text-align: center; font-weight: bold; margin: 0 auto;"><a href="#modal-close" title="Close" class="modal-close">Click here to CLOSE this Modal Window</a></div> <div> <div>Text and other content can be inserted here as needed.</div> <div id="button"> <a href="http://www.suggest-a-fix.com/index.php?/topic/1867-modal-window-image-on-top-of-another-image/" target="_blank"><img src="button.png"></a> </div> </div> </div> </body> </html> |