JSFiddle - React, Tailwind, and code Playground

by Mohammed Fellak

HTML

<div id="block">
  <img src="http://ashleyfurniture.scene7.com/is/image/AshleyFurniture/19103-15-SW-P1-KO?$AFHS-Grid-1X$" width="150px">
  <h3>Garristown Power Reclining Sofa</h3>
  ⭐⭐⭐⭐⭐
  <p>$1,259.99</p>

  <button class="opener" data-id="#dialog1">QuickView</button>
</div>

<div class="dialog" id="dialog1" title="Garristown Power Reclining Sofa">
<img src="http://ashleyfurniture.scene7.com/is/image/AshleyFurniture/19103-15-SW-P1-KO?$AFHS-Grid-1X$" width="150px">
<h3>Garristown Power Reclining Sofa</h3>
⭐⭐⭐⭐⭐
<p>$1,259.99</p>

<button class="opener" data-id="#dialog2">Learn More</button>
</div>
    
<div class="dialog" id="dialog2" title="More about this PDP">
<iframe width="250" height="150" src="https://www.youtube.com/embed/v7S5qhmGV7c" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3>Garristown Power Reclining Sofa</h3>
</div>

CSS

* {
    margin: 5px;
}

JavaScript

$(".dialog").dialog({
  autoOpen: false,
  resizable: false,
  show: {effect: "fade", duration: 200 },
  hide: {effect: "fade", duration: 200 },
  draggable: false,
  closeOnEscape: true,
  width: '75%',
  height: 'auto',
  modal: true,
});

 $('#dialog2').on('dialogclose', function(event) {
   $('iframe').attr('src', $('iframe').attr('src'));
 });

 $('#dialog1').on('dialogclose', function(event) {
 });

$(".opener").click(function () {
    var id = $(this).data('id');
    $(id).dialog("open");
});



$('#dialog1').on('focusout', function(){
  $('#dialog1').dialog('close')
});

$('#dialog2').on('focusout', function(){
  $('#dialog2').dialog('close')
});

/* $('#dialog2').on('focusout', function(){
  $('#dialog1').parent().hide()
}); */

                       
/* $(document).on('click', function(event) {
  if ($(event.target).closest('#dialog1').length === 0) {
    $('#dialog1').parent().parent().hide();
  }
}); */

/* $("#dialog1").live("click", function (){
  $("#dialog1:visible").dialog("close");
}); */

                       
/* $(document).on('click', function(event) {
  if (!$(event.target).closest('#dialog1').length) {
    $('#dialog1').hide();
  }
}); */

/* $("body").click(function(event) {
  //if you click on anything except the modal itself or the "open modal" link, close the modal
  if (!$(event.target).closest("#dialog1").length) {
    $("body").find("#dialog1").hide();
  }
}); */