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").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,
}).on('focusout', function(){
	$('#dialog1').dialog('close');
	$('#dialog2').dialog('close');
});

 $('#dialog2').on('dialogclose', function(event) {
	$('iframe').attr('src', $('iframe').attr('src'));
 });
 
$(".opener").click(function () {
	var id = $(this).data('id');
    $(id).dialog("open");
});

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

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