JQueryUI 对话框移出浏览器窗口答案

【问题标题】：JQueryUI dialog moving outside browser windowJQueryUI 对话框移出浏览器窗口
【发布时间】：2021-01-22 06:31:28
【问题描述】：

我在 boostrap 模板（Shards UI）上使用 JQueryUI 和 dialogextend。

我的问题是对话框可以移出窗口并在网页上显示滚动条：

有谁知道这是什么原因造成的？我试图以不同的顺序包含 CSS 和 JS，但这没有帮助。这是仍然出现问题的最小代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">s
</head>

<body class="h-100">
    <div id="testdialog" title="Basic dialog">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
  <div class="container-fluid">
    <div class="row">
      
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
  $( function() {
    $( "#testdialog" ).dialog({
      resizable: true,
      closeText: "",
      height: "auto",
      width: 400
    });
     $('.ui-dialog').css('z-index',9999);
  } );
</script>
</body>
</html>

感谢您的回复。

【问题讨论】：

欢迎来到 Stack Overflow。你有两个例子，但它们似乎不正确。请参观：stackoverflow.com/tour，然后提供一个最小的、可重复的示例：stackoverflow.com/help/minimal-reproducible-example

标签： html jquery jquery-ui bootstrap-4 jquery-ui-dialog

【解决方案1】：

解决了。

我使用了不同版本的 JS 文件和 CSS 文件。使用相同的版本有效。

【讨论】：