jQuery UI Dialog尝试包含时出现问题

时间:2016-05-27 14:59:44

标签: javascript jquery html css

所以我一直在努力解决这个问题,现在我的对话框正确地显示在容器元素中,但我没有找到任何解决方案。

我正在尝试将对话框包含在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 -->

JSFiddle

2 个答案:

答案 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
});

https://jsfiddle.net/bqsd7Luk/8/

答案 1 :(得分:0)

你说你想要限制对话框的大小调整&#34;如果你想这样做,为什么不设置resizable为false?

JS