nsantorello/modal_dialog.html

## modal_dialog.html
<html>
  <head>
    <style type="text/css">
      .lightbox-container {
        display:none;
      }

      #lightbox {
        display:none;
        background: #333333;
        opacity:0.9;
        filter:alpha(opacity=90);
        position:fixed;
        top:0px;
        left:0px;
        min-width:100%;
        min-height:100%;
        z-index:1000;
      }

      #lightbox-panel {
        display:none;
        position:fixed;
        border-radius: 15px;
        top:100px;
        left:50%;
        margin-left:-290px;
        width:500px;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.6);
        padding: 40px;
        z-index:1001;
      }

      .my-content {
        color: white;
      }
    </style>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
    <script type="text/javascript">
    $(document).ready(function(){
      // Dismiss the dialog when user presses ESC key
      document.onkeydown = function(evt) {
        evt = evt || window.event;
        if (evt.keyCode == 27) {
          $("#lightbox, #lightbox-panel").fadeOut(300);
        }
      };

      // Show the lightbox
      $(".show-lightbox").click(function(e){
        e.preventDefault();
        $("#lightbox-content").empty();
        var content = $("#" + $(this).attr("data-lightbox")).html()
          .trim().replace(/^<!--/, "").replace(/-->$/, "");
        $("#lightbox-content").html(content);
        $("#lightbox, #lightbox-panel").fadeIn(300);
      });

      // Close the lightbox
      $("#lightbox").click(function(e){
        $("#lightbox, #lightbox-panel").fadeOut(300);
      });
    })
    </script>
  </head>
  <body>
    <div align="center">
      Show Modal Dialog:
      <a class='show-lightbox' data-lightbox='my-lightbox' href='#'>One</a>
      <a class='show-lightbox' data-lightbox='my-lightbox2' href='#'>Two</a>
    </div>

    <div class='lightbox-container' id='my-lightbox'>
      <div align='center' class='my-content'>
        This is for content that you want to load with the page.
      </div>
    </div>

    <div class='lightbox-container' id='my-lightbox2'>
      <!--<div align='center' class='my-content'>
        This is for content that you don't want to load when the page loads, e.g. embedded videos or images.  The HTML will sit in the page as a comment and only be used when the user activates the lightbox.
      </div>-->
    </div>

    <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

    <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

    <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

    <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

    <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

    <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

    <!-- Lightbox content -->
    <div id='lightbox-panel'>
      <div id='lightbox-content'></div>
    </div>
    <div id='lightbox'></div>
  </body>
</html>
	<html>
	<head>
	<style type="text/css">
	.lightbox-container {
	display:none;
	}

	#lightbox {
	display:none;
	background: #333333;
	opacity:0.9;
	filter:alpha(opacity=90);
	position:fixed;
	top:0px;
	left:0px;
	min-width:100%;
	min-height:100%;
	z-index:1000;
	}

	#lightbox-panel {
	display:none;
	position:fixed;
	border-radius: 15px;
	top:100px;
	left:50%;
	margin-left:-290px;
	width:500px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.6);
	padding: 40px;
	z-index:1001;
	}

	.my-content {
	color: white;
	}
	</style>
	<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
	<script type="text/javascript">
	$(document).ready(function(){
	// Dismiss the dialog when user presses ESC key
	document.onkeydown = function(evt) {
	evt = evt \|\| window.event;
	if (evt.keyCode == 27) {
	$("#lightbox, #lightbox-panel").fadeOut(300);
	}
	};

	// Show the lightbox
	$(".show-lightbox").click(function(e){
	e.preventDefault();
	$("#lightbox-content").empty();
	var content = $("#" + $(this).attr("data-lightbox")).html()
	.trim().replace(/^<!--/, "").replace(/-->$/, "");
	$("#lightbox-content").html(content);
	$("#lightbox, #lightbox-panel").fadeIn(300);
	});

	// Close the lightbox
	$("#lightbox").click(function(e){
	$("#lightbox, #lightbox-panel").fadeOut(300);
	});
	})
	</script>
	</head>
	<body>
	<div align="center">
	Show Modal Dialog:
	<a class='show-lightbox' data-lightbox='my-lightbox' href='#'>One</a>
	<a class='show-lightbox' data-lightbox='my-lightbox2' href='#'>Two</a>
	</div>

	<div class='lightbox-container' id='my-lightbox'>
	<div align='center' class='my-content'>
	This is for content that you want to load with the page.
	</div>
	</div>

	<div class='lightbox-container' id='my-lightbox2'>
	<!--<div align='center' class='my-content'>
	This is for content that you don't want to load when the page loads, e.g. embedded videos or images. The HTML will sit in the page as a comment and only be used when the user activates the lightbox.
	</div>-->
	</div>

	<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

	<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

	<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

	<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

	<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

	<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

	<!-- Lightbox content -->
	<div id='lightbox-panel'>
	<div id='lightbox-content'></div>
	</div>
	<div id='lightbox'></div>
	</body>
	</html>