JSFiddle - React, Tailwind, and code Playground

by ivandude

HTML

<a class="closedialogjj">Close DialogJJ!</a>

<div id="dialogjj-overlay">
    
    <div id="dialogjj">
        
    </div>    
    
</div>

CSS

#dialog-jj { 
    height:100%;
    width:100%;
    background-color:#999;
    position:fixed;
    display:none;
}

#dialogjj { display:none;
    height:350px;
    width:425px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-175px;
    margin-top:-225px;
    background:#ccc;
}

JavaScript

// this is happening on load
$("#dialogjj").html("<object width='425' height='350'><param name='movie' value='http://www.youtube.com/v/7AW9C3-qWug&autoplay=1'></param><embed src='http://www.youtube.com/v/7AW9C3-qWug&autoplay=1' type='application/x-shockwave-flash' width='425' height='350'></embed></object>");
$('#dialogjj-overlay').css('display','block');
$('#dialogjj').css('display','block');


// this is happening on click only ..
$(".closedialogjj").click(function() {
  $("#dialogjj").html("removed object success!"); //or leave me empty!  
  
    $('#dialogjj-overlay').css('display','none');
    $('#dialogjj').css('display','none');
     // hiding the divs so they arent sitting on top of ur layout
    
});

// you could set up another .click function OR make the close button into a toggle to easily make it show again!