JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">
<div class="demo">
    
    <div id="dialog" title="Basic dialog">
        <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>
    
    <!-- Sample page content to illustrate the layering of the dialog -->
    
    <div class="hiddenInViewSource" style="padding:20px;">
        <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
        <form>
            <input value="text input" /><br />
            <input type="checkbox" />checkbox<br />
            <input type="radio" />radio<br />
            <select>
                <option>select</option>
                
            </select><br /><br />
            <textarea>textarea</textarea><br />
        </form>
    </div><!-- End sample page content -->
    
</div><!-- End demo -->

<div class="demo-description">
    
    <p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe.  It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p>
    
</div><!-- End demo-description -->

CSS

.demo { width: 500px; height: 500px; margin: 50px auto; border: #333 1px solid; }
.ui-dialog { font-size: 0.8em }

JavaScript

$(function() {

    $("#dialog").dialog();
    
    var container = $('.demo'),
        dialog = $('.ui-dialog');
    // get container top left corner locations
    var cx1 = container.offset().left,
        cy1 = container.offset().top;
    // get dialog size
    var dw = dialog.outerWidth(),
        dh = dialog.outerHeight();
    // get container bottom right location, then subtract the dialog size
    var cx2 = container.width() + cx1 - dw,
        cy2 = container.height() + cy1 - dh;
    dialog.draggable( "option", "containment", [cx1, cy1, cx2, cy2] );
  
    
});