JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div class="cvrp-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>

JavaScript

$(".cvrp-dialog").dialog({
    drag: function() {
        $.data(this, 'dragged', true);
    },
    open: function() {
        $.data(this, 'dragged', false);        
    }
});
$(window).resize(function() {
    $(".cvrp-dialog").each(function() {
        if(!$.data(this, 'dragged'))
            $(this).dialog('option', 'position', 'center');
    });
});