JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.min.css">
JavaScript
$.widget("sj.blocker", $.ui.dialog, {
options: { modal: true,
autoOpen: false},
_create: function () {
this.options.title = "TEST";
this._super();
},
open: function () {
this._super();
return $.Deferred(function(dfd){
setTimeout(function(){
dfd.resolve();
}, 1000);
});
}
});
var first = $('<div id="dialogOne" title="Basic dialog"><p>Description</p></div>').blocker();
first.blocker("open").done(function(){
var second = $('<div id="dialogTwo" title="Basic dialog"><p>Description <input id="check" type="checkbox" checked><input id="check" type="checkbox" checked></p></div>').dialog({
modal: true,
autoOpen: false
});
second.dialog("open");
first.blocker("close");
});