JSFiddle - React, Tailwind, and code Playground

by Paulo Silva

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/flick/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div id="dialog" title="Tela Modal de Exemplo">
      <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>

<button id="btnLupa">Abrir Modal de Teste</button>

JavaScript

$(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $( "#btnLupa" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });