Div 未显示，Azure AD B2C 页面自定义

Question

我使用 popperJS 在用户关注密码字段时添加弹出框。这是 Azure AD B2C 页面自定义。我可以看到 box 元素在那里，但它没有显示。非常感谢任何帮助，谢谢！

I can see the popover box is on the page

if (window.jQuery) {
  (function ($) {
    $(document).ready(function () {
      const passwordField = document.querySelector('input[id=newPassword]');
      passwordField.removeAttribute('title');
      passwordField.addEventListener('focus', () => {
        $('#newPassword').popover({
          trigger: 'focus',
          container: 'body',
          html: true,
          content: '<p>And here some amazing content. It is very engaging. Right?</p><p>TEST Test</p><p>TEST Test</p><p>TEST Test</p>',
          placement: 'right'
        });
      });
    });
  }(window.jQuery));
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<input id="newPassword" class="textInput" type="password" placeholder="New Password" aria-label="New Password" aria-required="true">

Answer 1

问题出在 bootstrap.min.js 的版本上。 Azure AD B2C 主题使用 bootstrap.min.css 版本 3.3.5，它不适用于更高版本的 bootstrap.min.js。这导致 .fade class 无法正常工作并且不透明度被设置为 0.

检查您的 Azure AD B2C 主题自定义 HTML 并确保 bootstrap 资产版本没有崩溃。

Div 未显示，Azure AD B2C 页面自定义

Div not showing, Azure AD B2C page customisation

html

javascript

azure-ad-b2c

popper.js

bootstrap-5