clamstew · August 29, 2015 14:01
diff --git a/modal_example.html b/modal_example.html
 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>My Title</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- <link rel="stylesheet" href="style.css"> -->
        <style type="text/css">
          #mymodal-wrap {
            width: 100%;
            position: absolute;
            z-index: 100;
          }
          #mymodal {
            margin: 0 auto;
            border: 2px solid #000;
            background: white;
            z-index: 105;
            width: 300px;
            height: 400px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            padding: 10px;
          }
          .close-modal {
            cursor: pointer;
            background: black;
            border: 2px solid white;
            color: white;
            width: 15px;
            height: 15px;
            float:right;
            margin-top:-20px;
            margin-right:-20px;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            font-weight: bold;
            padding: 10px 10px 10px 10px;
          }
          
          .card {
              width: 100px;
              height: 100px;
          }
        </style>
    </head>
    <body>
      <!-- body goes here -->
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      
      <div class="card">I want to grab this text<h4>title</h4></div>
      
      <a class="show-modal" href="#">show modal</a>

      <div id="mymodal-wrap">
        <div id="mymodal" class="shadow" style="display:none;">
          <div class="close-modal shadow">X</div>
          Lorem this is a modal!!
        </div>
      </div>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script type="text/javascript">
        $('.close-modal').on('click', function() {
          console.log("this is running");
          $('#mymodal').hide();
        });

        $('.show-modal').on('click', function(e) {
          e.preventDefault();
          $('#mymodal').show();
        });
        
        $('.card').on('click',function() {
          var allHtml = $(this).html();
          $('#mymodal').html(allHtml);        
        });

      </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>My Title</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- <link rel="stylesheet" href="style.css"> -->
	<style type="text/css">
	#mymodal-wrap {
	width: 100%;
	position: absolute;
	z-index: 100;
	}
	#mymodal {
	margin: 0 auto;
	border: 2px solid #000;
	background: white;
	z-index: 105;
	width: 300px;
	height: 400px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 10px;
	}
	.close-modal {
	cursor: pointer;
	background: black;
	border: 2px solid white;
	color: white;
	width: 15px;
	height: 15px;
	float:right;
	margin-top:-20px;
	margin-right:-20px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	font-weight: bold;
	padding: 10px 10px 10px 10px;
	}

	.card {
	width: 100px;
	height: 100px;
	}
	</style>
	</head>
	<body>
	<!-- body goes here -->
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

	<div class="card">I want to grab this text<h4>title</h4></div>

	<a class="show-modal" href="#">show modal</a>

	<div id="mymodal-wrap">
	<div id="mymodal" class="shadow" style="display:none;">
	<div class="close-modal shadow">X</div>
	Lorem this is a modal!!
	</div>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript">
	$('.close-modal').on('click', function() {
	console.log("this is running");
	$('#mymodal').hide();
	});

	$('.show-modal').on('click', function(e) {
	e.preventDefault();
	$('#mymodal').show();
	});

	$('.card').on('click',function() {
	var allHtml = $(this).html();
	$('#mymodal').html(allHtml);
	});

	</script>
	</body>
	</html>