JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js"></script>
<div style=display:none>
    <div id=modal1>Modal 1
        <br />
        <input type=button href=#modal2 value=modal2 />
    </div>
    <div id=modal2>modal 2</div>
</div>
<input type=button href=#modal1 value=modal1 />

JavaScript

$(document).ready(function () {
    $('input[href=#modal1]').fancybox({
        onComplete: function () {
            $("#fancybox-close").off().on("click", function (event) {
                $.fancybox.close();
            })
        }
    });
    $('input[href=#modal2]').fancybox({
        onComplete: function () {
            $("#fancybox-close").off().on("click", function (event) {
                event.preventDefault();
                $('input[href=#modal1]').trigger("click");
            })
        }
    });
});