JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="receipt" data-details-src="http://techcrunch.com">Receipt - Techcruch</div>
<div class="receipt" data-details-src="http://mashable.com">Receipt -Mashable</div>
<div class="receipt" data-details-src="http://lemon.k2c.eu/s/x.html">Koabla</div>

<iframe src="" frameborder="0"></iframe>

CSS

iframe {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
}

iframe.is-active {
    display: block;
}

JavaScript

var $iframe = $('iframe');


$('.receipt').on('click', function (e) {
    var details_src = $(e.target).data('details-src');
    $iframe.prop('src', details_src).addClass('is-active');
});