JQuery 对话框在升级到 Bootstrap 4 时不显示内容答案

【问题标题】：JQuery dialog not displaying content on upgrade to Bootstrap 4JQuery 对话框在升级到 Bootstrap 4 时不显示内容
【发布时间】：2021-12-01 08:14:48
【问题描述】：

我正在努力将我们的网站从 Bootstrap 3 升级到 Bootstrap 4。我有一个 JQuery 对话框，当我更改为 Bootstrap 4 时该对话框不再工作 - 对话框的内容不显示。 JQuery 对话框定义中的按钮是，但仅此而已。任何想法表示赞赏！

Bootstrap 3 对话框：

Bootstrap 4 对话框：

var themedialog = $("#theme-change-form").dialog({
  autoOpen: false,
  height: 'auto',
  width: 450,
  modal: true,
  buttons: {
    "Update Theme": updateTheme,
    Cancel: function() {
      themedialog.dialog("close");
    }
  },
  close: function() {
    $('.subtheme-button').removeClass('active');
    $('.subtheme-button.selected').addClass('active');
  }
});

//Open dialog when change logo link clicked
$('#change-theme').on("click", function() {
  themedialog.dialog('open');
});

function updateTheme() {
  console.log('theme udated');
}

<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.usebootstrap.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" type="text/javascript"></script>


<div hidden id="theme-change-form">
  <div>
    <h3>Air</h3>
    <button class='subtheme-button' data-pkSubThemeID='3'>Acid Precipitation</button>
  </div>
  <!--more buttons here in the same format as above-->
</div>

<button id="change-theme">Change Themes</button>

谢谢！

【问题讨论】：

你在认真使用 jQuery 1.10 吗？我会从那里开始。您通常可以毫无问题地更新到 3.x，除了 live() 到 on() 的转换。
另外，jQueryUI 很古老，通常不受支持。我会将它们转换为引导对话框。您将拥有更现代的 API 和更好地集成的主题。显然这两者是不兼容的，因为它们都有dialog() 方法。
您为什么不使用所有这些库的最新版本？ Bootstrap 4.1 也很老了。我完全被你的策略弄糊涂了。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

删除对话框元素上的hidden 属性。 Bootstrap 具有在具有该属性的元素上设置 display: none 的 CSS，无论如何似乎都没有必要。浏览器的文档检查器是查看此类内容的绝佳工具。

var themedialog = $("#theme-change-form").dialog({
  autoOpen: false,
  height: 'auto',
  width: 450,
  modal: true,
  buttons: {
    "Update Theme": updateTheme,
    Cancel: function() {
      themedialog.dialog("close");
    }
  },
  close: function() {
    $('.subtheme-button').removeClass('active');
    $('.subtheme-button.selected').addClass('active');
  }
});

//Open dialog when change logo link clicked
$('#change-theme').on("click", function() {
  themedialog.dialog('open');
});

function updateTheme() {
  console.log('theme udated');
}

body {
  padding: 30px;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.usebootstrap.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" type="text/javascript"></script>


<div id="theme-change-form">
  <div>
    <h3>Air</h3>
    <button class='subtheme-button' data-pkSubThemeID='3'>Acid Precipitation</button>
  </div>
  <!--more buttons here in the same format as above-->
</div>

<button id="change-theme">Change Themes</button>

【讨论】：