为几乎相同的 html 获取不同的引导程序行为 [英] Getting different behaviour of bootstrap for almost identical html

查看：20
本文介绍了为几乎相同的 html 获取不同的引导程序行为的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到了一个奇怪的问题.我的应用程序在启动时显示一个 Bootstrap 模式.但是一旦我点击 OK 关闭 modal，Bootstrap 不会删除 <div class="modal-backdrop fade显示"></div>.因此，后台的控件变得无法点击.

为了调试问题，我想创建一个独立的简单应用程序，它具有类似的行为，但我注意到在该应用程序中，Bootstrap 删除了 backdrop.我比较了我的主应用程序和示例应用程序的 html，它们几乎相同.我可能犯了什么错误?您可能想使用一些文件差异工具来比较 HTML.

主应用的 HTML

<app-root signup=""_nghost-c0=""ng-version="6.1.7"><app-dialog-box _ngcontent-c0="" _nghost-c1="" ng-reflect-dialog-i-d="appDialog"><!-- 由于某种原因，示例应用中的 ng-reflect-dialog-i-d 是 ng-reflect-dialog-id，注意 i-d 与 id --><div _ngcontent-c1=""class="modalfade show" role="dialog" tabindex="-1" id="appDialog" style="display:block;"><div _ngcontent-c1="" class="modal-dialog modal-dialog-centric" role="document"><div _ngcontent-c1="" class="modal-content"><div _ngcontent-c1="" class="modal-header"><h5 _ngcontent-c1="" class="modal-title">CodingJedi</h5><button _ngcontent-c1="" aria-label="Close" class="close" data-dismiss="modal" type="button"><span _ngcontent-c1="" aria-hidden="true">×</span>

<div _ngcontent-c1="" class="modal-body"><p _ngcontent-c1="">注册成功</p>

<div _ngcontent-c1="" class="modal-footer"><button _ngcontent-c1="" class="btn btn-secondary" data-dismiss="modal" type="button">关闭</button>

</app-dialog-box></app-root><script src="/assets/javascripts/common/vendor/jquery/jquery-3.2.1.js" type="text/javascript"></script><script src="/assets/javascripts/common/vendor/popper/umd/popper.js" type="text/javascript"></script><script src="/assets/javascripts/common/vendor/bootstrap/bootstrap.js" type="text/javascript"></script><script src="/assets/ui/polyfills.js" type="text/javascript"></script><script src="/assets/ui/runtime.js" type="text/javascript"></script><script src="/assets/ui/vendor.js" type="text/javascript"></script><script src="/assets/ui/styles.js" type="text/javascript"></script><script src="/assets/ui/main.js" type="text/javascript"></script><!-- TODOM - 我需要 popper.js 吗??--><div class="modal-backdrop淡出显示"></div><!-- 这不会在我的应用程序中删除-->

示例应用的 html

<app-root signup="success1" _nghost-c0="" ng-version="6.1.7"><app-dialog _ngcontent-c0="" _nghost-c1="" ng-reflect-dialog-id="appDialog"><!-- NOTICE id 而不是 i-d --><div _ngcontent-c1=""class="modalfade show" role="dialog" tabindex="-1" id="appDialog" style="display:block;"><div _ngcontent-c1="" class="modal-dialog modal-dialog-centric" role="document"><div _ngcontent-c1="" class="modal-content"><div _ngcontent-c1="" class="modal-header"><h5 _ngcontent-c1="" class="modal-title">CodingJedi</h5><button _ngcontent-c1="" aria-label="Close" class="close" data-dismiss="modal" type="button"><span _ngcontent-c1="" aria-hidden="true">×</span>
<div _ngcontent-c1="" class="modal-body"><p _ngcontent-c1="">无法识别的消息:未定义</p>
<div _ngcontent-c1="" class="modal-footer"><button _ngcontent-c1="" class="btn btn-secondary" data-dismiss="modal" type="button">关闭</button>
</app-dialog></app-root><script src="jquery-3.2.1.js" type="text/javascript"></script><script src="popper.js" type="text/javascript"></script><script src="bootstrap.js" )"="" type="text/javascript"></script><script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="scripts.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script><div class="modal-backdrop淡出显示"></div><!-- 当我单击确定"时，引导程序会在示例应用程序中删除此内容-->

更新

我观察到的是，当应用程序启动时，html 末尾有 <div class="modal-backdrop fade show"></div>.当我点击关闭按钮时，另一个 <div class="modal-backdrop fade show"></div> 被添加和删除，而前一个仍在页面中！>

应用启动时的图片:

点击关闭时的图片:

解决方案

这个问题完全不同.问题在于我显示模态的方式.参见

. Due to this the controls in the background become unclickable.

To debug the issue, I thought to create a standalone simple application which has similar behaviour but I notice that in that application, Bootstrap removes the backdrop. I compared the html of my main app and the sample app and they are almost the same. What is the mistake I might be making? You might want to use some file diff tool to compare the HTMLs.

HTML of main app

<body class="modal-open">
  <app-root signup="" _nghost-c0="" ng-version="6.1.7">
    <app-dialog-box _ngcontent-c0="" _nghost-c1="" ng-reflect-dialog-i-d="appDialog"> <!--  FOR SOME REASON, ng-reflect-dialog-i-d IS ng-reflect-dialog-id in the sample app, notice i-d vs id -->
      <div _ngcontent-c1="" class="modal fade show" role="dialog" tabindex="-1" id="appDialog" style="display: block;">
        <div _ngcontent-c1="" class="modal-dialog modal-dialog-centered" role="document">
          <div _ngcontent-c1="" class="modal-content">
            <div _ngcontent-c1="" class="modal-header">
              <h5 _ngcontent-c1="" class="modal-title">CodingJedi</h5>
              <button _ngcontent-c1="" aria-label="Close" class="close" data-dismiss="modal" type="button">
                <span _ngcontent-c1="" aria-hidden="true">×</span>
              </button>
            </div>
            <div _ngcontent-c1="" class="modal-body">
              <p _ngcontent-c1="">Signup was successful</p>
            </div>
            <div _ngcontent-c1="" class="modal-footer">
              <button _ngcontent-c1="" class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
            </div>
          </div>
        </div>
      </div>
    </app-dialog-box>
  </app-root>

    <script src="/assets/javascripts/common/vendor/jquery/jquery-3.2.1.js" type="text/javascript"></script>
    <script src="/assets/javascripts/common/vendor/popper/umd/popper.js" type="text/javascript"></script>
    <script src="/assets/javascripts/common/vendor/bootstrap/bootstrap.js" type="text/javascript"></script>
    <script src="/assets/ui/polyfills.js" type="text/javascript"></script>
    <script src="/assets/ui/runtime.js" type="text/javascript"></script>
    <script src="/assets/ui/vendor.js" type="text/javascript"></script>
    <script src="/assets/ui/styles.js" type="text/javascript"></script>
    <script src="/assets/ui/main.js" type="text/javascript"></script>
      <!-- TODOM - Do I need popper.js??--> 

<div class="modal-backdrop fade show"></div> <!-- THIS DOESN'T GET REMOVED IN MY APP-->
</body>

html of sample app

<body class="modal-open">
  <app-root signup="success1" _nghost-c0="" ng-version="6.1.7">
    <app-dialog _ngcontent-c0="" _nghost-c1="" ng-reflect-dialog-id="appDialog"> <!-- NOTICE id instead of i-d -->
        <div _ngcontent-c1="" class="modal fade show" role="dialog" tabindex="-1" id="appDialog" style="display: block;">
            <div _ngcontent-c1="" class="modal-dialog modal-dialog-centered" role="document">
                <div _ngcontent-c1="" class="modal-content">
                    <div _ngcontent-c1="" class="modal-header">
                        <h5 _ngcontent-c1="" class="modal-title">CodingJedi</h5>
                        <button _ngcontent-c1="" aria-label="Close" class="close" data-dismiss="modal" type="button">
                            <span _ngcontent-c1="" aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div _ngcontent-c1="" class="modal-body">
                        <p _ngcontent-c1="">Unrecognised message: undefined</p>
                    </div>
                    <div _ngcontent-c1="" class="modal-footer">
                        <button _ngcontent-c1="" class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </app-dialog>
  </app-root>
    <script src="jquery-3.2.1.js" type="text/javascript"></script>
    <script src="popper.js" type="text/javascript"></script>
    <script src="bootstrap.js" )"="" type="text/javascript"></script>

<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>

<div class="modal-backdrop fade show"></div> <!-- WHEN I CLICK OK, BOOTSTRAP REMOVES THIS IN THE SAMPLE APP-->
</body>

Update

What I observed is that when the application starts, the html has <div class="modal-backdrop fade show"></div> in the end. Whe I click close button in the, another <div class="modal-backdrop fade show"></div> gets added and removed leaving the previous one still in the page!

Pic when app starts:

Pic when I click close:

解决方案

the issue was something entirely different. The problem was in the way I was showing the modal. See <div class="modal-backdrop fade"></div> taking entire window space

The way I debugged it was interesting. I added few console.log in bootstrap.js and observed that the messages I had added were being printed repeatedly.

这篇关于为几乎相同的 html 获取不同的引导程序行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆