JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css">
<script src="https://sdk.mixmax.com/v1.5.1/widgets.umd.min.js"></script>
<!-- Modal HTML embedded directly into document -->
<div style="visibility: hidden; position: absolute; pointer-events: none; z-index: -100">
<div class="encapsulate">
  <div class="cal-script">  
    <div class="mixmax-embedded-calendar" data-user-calendar-link="cloud" data-calendar-link="support" data-width="100%" data-height="580px">

    </div>
   </div>
 </div>
 
</div>
 
<div id="ex1" class="modal">
<p>
test
</p>
</div>


<!-- Link to open the modal -->
<a id="opener" href="#ex1" rel="modal:open">Schedule Now</a>

JavaScript

$(document).on($.modal.OPEN, function() {
 $(".cal-script").detach().appendTo(".jquery-modal .modal:visible");
});

$(document).on($.modal.CLOSE, function() {
 $(".cal-script").detach().appendTo(".encapsulate");
});