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

Question

我正在努力将我们的网站从 Bootstrap 3 升级到 Bootstrap 4。当我更改为 Bootstrap 4 时，我有一个 JQuery 对话框不再工作 - 对话框的内容不再显示。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>

谢谢你！

Answer 1

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

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>