JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css">
<div id="force" class="tabdialog">
<div id="dialog-movie-info" class="ui-helper-hidden tabdialog">
<div id="tabs-movie">
<ul>
<li><a href="#tab-info">Information</a></li>
<li><a href="#tab-cast">Cast List</a></li>
<li class="ui-tabs-close-button"><span class="ui-button-icon-primary ui-icon ui-icon-close"></span></li>
</ul>
<div id="tab-info">
<em>Info tab...
This better <br/>get big<br/>
This better <br/>get bigger<br/>
This better <br/>evena little bit more<br/>
</em>
</div>
<div id="tab-cast">
<em>Cast tab...</em>
</div>
</div>
</div>
<button id="OpenDialog">Open dialog</button>
</div>
CSS
.ui-tabs-nav li.ui-tabs-close-button {
float: right;
}
JavaScript
$('#dialog-movie-info').dialog({
draggable: false,
resizable: false,
show: 'fade',
hide: 'fade',
modal: true,
width: 450,
//position: ['center', 35],
create: function() {
$('#tabs-movie').tabs({
create: function(e, ui) {
$(this).parent().find('.tabdialog-close').click(function() {
$('#dialog-movie-info').dialog('close');
});
}
});
// remove the title of the dialog as we want to use the tab's one
$(this).parent().children('.ui-dialog-titlebar').remove();
// 1. remove the line between the tab and the dialog buttons
// 2. reduce the space between the buttons and the bottom of the panes
$(this).parent().find('.ui-dialog-buttonpane').css('border-width','0').css('margin-top','0');
// align the buttons with the tab pane, so put the margin to the left in the buttons instead of
// the jquery standard right
$(this).parent().find('.ui-dialog-buttonset button').css('margin','0.5em 0em 0.5em 0.4em');
},
buttons:{
Ok:function () {},
Cancel:function () {$(this).dialog("close");}
}
});
$('#OpenDialog').click(function() {
$('#dialog-movie-info').dialog('open');
});