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

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 具有在具有该属性的元素上设置 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>