Question

我正面临一个特殊的问题。我的应用程序在启动时显示了Bootstrap模态。但是，一旦我单击OK关闭modal，Bootstrap就不会删除<div class="modal-backdrop fade show"></div>。因此，后台的控件变得不可单击。

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

主应用程序的HTML

<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

<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>

更新

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

应用启动时的图片：

单击关闭时的图片：

Answer 1

问题完全不同。问题出在我展示模态的方式上。参见<div class="modal-backdrop fade"></div> taking entire window space

我调试它的方式很有趣。我在console.log中添加了几个bootstrap.js，并观察到我添加的消息被重复打印。

对于几乎完全相同的html，获取引导程序的不同行为

更新

1 个答案: