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="opener367" 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="auto"
            src="https://www.youtube.com/embed/Xzt1__GIvbM"
            frameborder="0" allow=""
            allowfullscreen>
    </iframe>
    <h3>Garristown Power Reclining Sofa</h3>
</div>

CSS

* {
    margin: 5px;
}
/* .ui-widget-overlay {
  opacity: 0.5;
  filter: Alpha(Opacity=50);
  background-color: black;
} */

JavaScript

$(".dialog").dialog({
  autoOpen: false,
  resizable: false,
  show: {effect: "fadeIn", duration: 350 },
  hide: {effect: "fadeOut", duration: 350 },
  draggable: false,
  closeOnEscape: true,
  width: '75%',
  height: 'auto',
  modal: true,
/*   open: function(event, ui){
      console.log(event)
      console.log(ui) 
   $('.ui-widget-overlay')[0].click(function(){
        ('#modal1').dialog('close');
      });
      
      $('.ui-widget-overlay')[1].click(function(){
          ('#modal2').dialog('close');
      }); 
  } */
});

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

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

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

 $('#dialog1').dialog(
 
 ); */

$('#dialog1').dialog('dialogCreate', function(){
 setAttribute('onclick', '$(\'#modal2\').dialog(\'close\')')
})

/*     $('.ui-widget-overlay')[0].click(function(){
        ('#modal1').dialog('close');
    });  */