<link

 rel="stylesheet"

 href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"

 />

 

 <div>

 <div id="dialog-content" style="display:none;max-width:500px;">

 <h2>Hello, world!</h2>

 <p>

 <input type="text" value="" />

 </p>

 <p>

 Try hitting the tab key and notice how the focus stays within the dialog

 itself.

 </p>

 <p>

 To close dialog hit the esc button, click on the overlay or just click the

 close button.

 </p>

 <p>

 Element used to launch the modal would receive focus back after closing.

 </p>

 </div>

 <p>

 <button id="triggger">

 Launch Dialog

 </button>

 </p>

 <p>

 <button id="triggger-clone">

 Launch Dialog (clone)

 </button>

 </p>

 </div>

 <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>

 <script>

 document.getElementById("triggger").addEventListener("click", () => {

 Fancybox.show([{ src: "#dialog-content", type: "inline" }]);

 }); 

 

 document.getElementById("triggger-clone").addEventListener("click", () => {

 Fancybox.show([{ src: "#dialog-content", type: "clone" }]);

 }); 

 </script>