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"
            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,
});

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

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

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



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


/* 
$('.ui-widget-overlay').click(function(){
    $('#dialog1').dialog('close');
});

$(".ui-widget").setAttribute("onclick", "$('#dialog1').dialog('close')");
$(".ui-widget-overlay").setAttribute("onclick", "$('#dialog2').dialog('close')");

 */
 
function doSome1(){
	alert('modal 2 close')
	$('#modal2').dialog('close')
}