JSFiddle - React, Tailwind, and code Playground

by Thomas Jackson

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

    
    <!-- ui-dialog -->
    <div id="dialog" title="Your Request Form">
        <p>&nbsp;</p>
    </div>
<p><a href="#" id="dialog-link" class="ui-state-default ui-corner-all">Open Dialog</a></p>

CSS

iframe {
            overflow: scroll !important;
            width: 300px !important;
            height: 200px !important;
            border: 1px solid black;
        }
        body {
            font: 62.5% "Trebuchet MS", sans-serif;
            margin: 50px;
        }
        iframe {
            overflow: scroll !important;
            width: 1349px;
            height: 100%;
            border: 1px solid black;
        }
        .ui-dialog-content {
            background-color:white !important;
        }
        .ui-dialog-titlebar {
            background-color: white !important;
        }
        .ui-dialog-title {
            background-color: white !important;
            color: grey !important;
            font-size: 14px !important;
            font-weight: normal;
        }
        .ui-widget-header {
            background: none !important;
            background-color: white !important;
            border-color: white !important;
        }
        
         .demoHeaders {
            margin-top: 2em;
        }
       
        #dialog-link {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        .fakewindowcontain .ui-widget-overlay {
            position: absolute;
        }

JavaScript

$(document).ready(function () {
            var closeHtml = '<a href="#" id="dialog-close" style="position: absolute; top: 0; right: 4px; font-size: 20px; color: #000; text-decoration: none; outline: none;">&times;</a>';
            $("button[title='Close']").css('display', 'none').parent().append(closeHtml);
            
        });

        $("#button").button();
        

        $("#dialog").dialog({
            autoOpen: false,
            width: 850,
            height: 500,
            modal: true
            /*buttons: [
                {
                    text: "Ok",
                    click: function () {
                        $(this).dialog("close");
                    }
                },
                {
                    text: "Cancel",
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]*/
        });

        var url = 'http://www.cnn.com';

        // Link to open the dialog
        $("#dialog-link").click(function (event) {
            var dialog = $("#dialog");
            dialog.dialog("open");

            dialog.html('<iframe id="dialog-body" scrolling="yes" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>');

            $("#dialog-close").on('click', function (e) {
                $("button[title='Close']").click();
                //e.preventDefault();
                //dialog.close();
            });


            event.preventDefault();
        });

        // Hover states on the static widgets
        $("#dialog-link, #icons li").hover(
            function () {
                $(this).addClass("ui-state-hover");
            },
            function () {
                $(this).removeClass("ui-state-hover");
            }
        );