I was trying to constrain ui-modal-dialog closed by the "body" of html using Jquery's constrainment. I thought it was possible to just set .draggable( { containment: 'body' }): However, ui-modal-dialog always escapes and I can overscroll more than containment area such as "body" in this case( I also tried some rectangle [0, 0, 1024, 768] though, ui-modal-dialog can break its boundary). Now, I set the position: relative in the "html" and "body" in the code and it seems work so far.
My question is that I can use draggable({containment: some-container}) for constraining the ui-modal-dialog without using relative: position.?
My JS fiddle: Containment not working
https://jsfiddle.net/kimihiro/qmgs37re/
My JS fiddle: Containment with position: relative in "html" and "body" of styling Jquery.
https://jsfiddle.net/kimihiro/jtb3yhs8/
The same "Containment not working" code is below but not working here...
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
_title: function(title) {
if (!this.options.title) {
title.html(" ");
} else {
title.html(this.options.title);
}
}
}));
$("#dialog").dialog({
autoOpen: false,
height: 300,
width: 830,
dialogClass: 'myTitleClass',
modal: true,
title: "Carpe Diem. Nunca Acredito Posteiro",
closeOnEscape: false,
open: function(event, ui) {
$('.ui-dialog-titlebar-close', ui.dialog | ui);
},
buttons: {
"Save": function() {
$(this).trigger(updateKeyword());
}
}
}).draggable({ containment: 'body' });
$("#opener").click(function() {
$("#dialog").dialog("open");
});input#opener {
height: 30px;
width: 200px;
left: 50%;
margin-top: -15px;
/* = -height / 2 */
margin-left: -100px;
/* = -width / 2 */
position: fixed;
top: 80%;
background: rgba(4, 115, 184, 0.9);
color: #fff;
font-style: Arial;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
border-style: outset;
display: flex;
transition: .5s ease;
vertical-align: middle;
justify-content: center;
}
.myTitleClass .ui-dialog-title {
white-space: normal;
}
.myTitleClass .ui-dialog-titlebar {
background: rgba(4, 115, 184, 0.9);
color: #fff;
font-size: 16px;
font-weight: 700;
height: 60px;
}
.myTitleClass .ui-widget-content .ui-state-default {
background-image: none;
background-color: rgba(4, 115, 184, 0.6);
color: #fff;
font-size: 16px;
font-weight: 700;
border-style: none;
}
.myTitleClass .ui-widget-content .ui-state-hover {
background-image: none;
background-color: rgb(4, 127, 184);
color: #fff;
font-size: 16px;
font-weight: 700;
border-style: none;
}
.ui-widget-overlay {
position: fixed;
background: black;
}
.myTitleClass .ui-dialog-titlebar-close {
background: rgba(4, 115, 184, 0.9);
border-radius: 17px;
height: 33px;
margin: -10px 0 0;
padding: 1px;
position: absolute;
right: -28px;
top: -24%;
width: 33px;
}
.myTitleClass.ui-icon-close {
background: url("http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png");
}
.ui-dialog {
overflow: visible;
}
#footer {
background: #0473b8;
color: #fff;
font-size: 12px;
line-height: 50px;
text-align: center;
bottom: 0;
height: 50px;
position: fixed;
width: 100%;
}
html {
height: 100%;
overflow-x: hidden;
}
body {
height: 100%;
overflow: hidden;
}
}<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<input type="button" id="opener" value="Register Keyword">
</button>
<div id="dialog">Merry Christmas.
</div>
<div id="footer">footer</div>
