jQuery reponsive dialog box

dynamicly resizing responsive dialog box with jquery. uses flexbox

by Joshua

HTML

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<div id="foo">
    you<br />
    will<br />
    see<br />
    that<br />
    the<br />
    contents<br />
    span<br /><br />
    you<br />
    will<br />
    see<br />
    that<br />
    the<br />
    contents<br />
    span<br />
</div>

CSS

body { font-size:12px; }

.ui-dialog {
    z-index:1000000000;
    left: 50% !important; top: 50% !important;
    transform:translateY(-50%) translateX(-50%) !important;
    position: fixed !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width:500px !important;
    height:500px !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.ui-dialog .ui-dialog-content {
    flex: 1;
}
.ui-dialog .ui-dialog-buttonpane {
    background:white;
}

JavaScript

$('#foo').dialog({
    buttons: {
        ok: function(){}
    }
});