JSFiddle - React, Tailwind, and code Playground

by zzzrefiddle

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.3/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.3/semantic.min.js"></script>
<button class="show" href="http://www.bing.com">Open</button>
<div class="ui fullscreen modal">
    <i class="close icon"></i>
    <div class="header">Test title</div>
    <div class="content">Test content</div>
    <!-- <div class="actions">
        <div class="ui button approve green" data-value="easy">Easy</div>
        <div class="ui button approve blue" data-value="normal">Normal</div>
        <div class="ui button approve red" data-value="hard">Hard</div>
    </div> -->
</div>
<div>Result: <span id="result"></span></div>

JavaScript

$(document).on("click", ".show", function () {
		var url = $(this).attr('href');
    $(".content").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
    $(".ui.modal").modal("setting", {
        closable: false,
        onApprove: function () {
            return false;
        }
    }).modal("show");
});