所以我一直在努力解决这个问题,现在我的对话框正确地显示在容器元素中,但我没有找到任何解决方案。
我正在尝试将对话框包含在div元素中。 div元素与对话框的大小相同,div将限制对话框的大小调整。
现在,对话框将被放置在div中,并且它仅限于div,但是当我拖动它时,对话框将移出容器。
$("#dialogtext").dialog({
appendTo: "#container",
autoOpen: true,
resizable: true
}).parent().draggable({
containment: '#container'
}).position({
my: "left top",
at: "left top",
of: "#container"
});
$('#clickMe').click(function() {
$("#dialogtext").dialog("open");
});
//$(".ui-dialog").css("position", "initial");
.main {
width: 90vw;
height: 60vh;
background-color: #fff;
border: 1px solid #eee;
border-bottom: 1px solid #ddd;
}
#container {
width: 70%;
height: 60%;
max-width: 90%;
max-height: 80%;
background-color: red;
}
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
<div class="main">
<button id="clickMe">Click Me</button>
<div id="container">
<div id="dialogtext">hello world!
</div>
<!-- dialog text -->
</div>
<!-- container -->
</div>
<!-- main -->
答案 0 :(得分:2)
你可以计算div的宽度和高度,并将它们设置为对话框
$("#dialogtext").dialog({
appendTo: "#container",
autoOpen: true,
height :$('#container').height(),
width :$('#container').width(),
resizable: true
}).resizable({
alsoResize: "#container", // Resize the container
containment: "#container" // Contain the resize to be in the container
});
答案 1 :(得分:0)
你说你想要限制对话框的大小调整&#34;如果你想这样做,为什么不设置resizable为false?
JS