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="auto" height="" src="https://www.youtube.com/embed/Xzt1__GIvbM" 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 Options
$(".dialog").dialog({
  autoOpen: false,
  resizable: false,
  show: {effect: "fadeIn", duration: 200 },
  hide: {effect: "fadeOut", duration: 200 },
  draggable: false,
  closeOnEscape: true,
  width: '75%',
  height: 'auto',
  modal: true,
  open: function () { // when a modal is open
    
    	// if first modal is open, bind close modal function onclick on the div layer behind the modal
        if ($('.ui-widget-overlay').length == 1){
    		$('.ui-widget-overlay').bind('click', function () {
        		$("#dialog1").dialog('close');
    		});
        }
        
		// Same as first modal but for the second one
        if ($('.ui-widget-overlay').length == 2){
    		$('.ui-widget-overlay').bind('click', function () {
        		$("#dialog2").dialog('close');
    		});
        }
  }
});

// reset youtube video when its modal get closed
 $('#dialog2').on('dialogclose', function() {
   $('iframe').attr('src', $('iframe').attr('src'));
 });

// open a dialog based on which button were clicked
$(".opener").click(function () {
    var id = $(this).data('id');
    $(id).dialog("open");
});