JSFiddle - React, Tailwind, and code Playground

by nightcoregirl

HTML

<div class="thumb milathumb1" data-target=".mila1"></div>
<div class="thumb milathumb2" data-target=".mila2"></div>
<div class="thumb milathumb3" data-target=".mila3"></div>


	<section class="full mila1">
		<span>
			<iframe width="560" height="315" src="https://www.youtube.com/embed/kvnAz0L9AUI" frameborder="0" allowfullscreen></iframe>
		</span>
	</section>


	<section class="full mila2">
		<span>
			<iframe width="420" height="315" src="https://www.youtube.com/embed/q3urJ4nMles" frameborder="0" allowfullscreen></iframe>
		</span>
	</section>


	<section class="full mila3">
		<span>
				<iframe width="560" height="315" src="https://www.youtube.com/embed/kvnAz0L9AUI" frameborder="0" allowfullscreen></iframe>
		</span>
	</section>

CSS

li{
	  		list-style-type:none;
	  	}

	  	*{
	  		padding:0;
	  		margin:0;
	  	}

		section{
			display:none;
			position:fixed;
			top:0;
			min-height:100vh;
			min-width:100vw;
			align-items: center;
			justify-content: center;
			background: rgba(1,1,1, 0.8);
		}

		.modal{
			display:flex;
		}


	/* 	.thumb:first-child{
			margin-left:20px;
		} */


		.thumb{
			background-size:10%;
			background: center center;
			width:300px;
			height:200px;
			float:left;
			display:inline-block;
			margin: 20px 10px 0px 10px;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
			transition: all 0.5s ease;
		}

		.thumb:hover{
			cursor:pointer;
			opacity:0.6;
		}

			.milathumb1{
			background: url("http://static.tumblr.com/wnn2rqh/sBJnl2d63/mila1.jpg");
		}

		.milathumb2{
			background: url("http://static.tumblr.com/wnn2rqh/hkEnl2dgb/mila2.jpg");
		}

		.milathumb3{
			background: url("http://static.tumblr.com/wnn2rqh/xDmnl2diu/mila3.jpg");
		}


		.full{

		}

JavaScript

$(document).ready(function() {

     $('.thumb').on("click", function(event) {
         var target = $(this).data('target');
         $(target).addClass("modal");
     });



  		$(function(){				
				
			var $win = $(".full"); // or $box parent container
			var $box = $("span");
			// var $log = $(".log");
			
			 $win.on("click.Bst", function(event){		
				if ( 
                $box.has(event.target).length == 0 //checks if descendants of $box was clicked
                &&
                !$box.is(event.target) //checks if the $box itself was clicked
              ){
                    $('.modal').removeClass("modal");
                    
				} else {
				   console.log("you clicked inside the box");
			// 		$log.text("you clicked inside the box");
				}
			});

        });


	});