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 id="quickView">QuickView</button>
</div>

<div id="dialog1" title="Garristown Power Reclining Sofa">
    <div class="dialog1">
        <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 id="more">Learn More</button>
    </div>
    <div class="dialog2">
        <button id="back">🡠 Go Back</button>
        <div>
            <iframe
                width="auto"
                src="https://www.youtube.com/embed/Xzt1__GIvbM"
                frameborder="0" allow=""
                allowfullscreen>
            </iframe>
        </div>
	    <h3>Garristown Power Reclining Sofa</h3>
    
    </div>
</div>

CSS

* {
    margin: 5px;
}

JavaScript

var dialog = $('#dialog1');
var dialogOne = $('.dialog1');
var dialogSecond = $('.dialog2');
var quickView = $('#quickView');
var more = $('#more');
var back = $('#back');

dialogSecond.hide();


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

quickView.on('click', function(){
	dialog.dialog('open');
});


 more.on('click', function() {
	dialogOne.hide();
    dialogSecond.show();
 });

 back.on('click', function() {
	$('iframe').attr('src', $('iframe').attr('src'));
	dialogOne.show();
    dialogSecond.hide();
 });
 
 
 dialog.on('dialogclose', function() {
   $('iframe').attr('src', $('iframe').attr('src'));
 });
 
 
 /* dialog.on('focusout', function() {
     dialog.dialog('close')
 }); */