Fatal编程技术网
  • bootstrap-4/
  • Bootstrap 4 为几乎相同的html获取不同的引导行为

Bootstrap 4 为几乎相同的html获取不同的引导行为

bootstrap-4 angular6

Bootstrap 4 为几乎相同的html获取不同的引导行为,bootstrap-4,angular6,Bootstrap 4,Angular6,我面临一个特殊的问题。我的应用程序在启动时显示一个引导模式。但是一旦我单击OK关闭模式，引导不会删除。因此，后台的控件变得不可访问 为了调试这个问题，我想创建一个具有类似行为的独立简单应用程序，但我注意到在该应用程序中，Bootstrap删除了background。我比较了我的主应用程序和示例应用程序的html，它们几乎相同。我可能会犯什么错误？您可能需要使用一些文件差异工具来比较HTMLs 主应用程序的HTML <body class="modal-open"> <app

我面临一个特殊的问题。我的应用程序在启动时显示一个
引导模式。但是一旦我单击
OK
关闭
模式
，
引导
不会删除
。因此，后台的控件变得不可访问

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

主应用程序的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>






单击关闭时的图片：


问题完全不同。问题在于我展示模态的方式。看


我调试它的方式很有趣。我在
bootstrap.js
中添加了一些
console.log
，并观察到我添加的消息被重复打印。
问题完全不同。问题在于我展示模态的方式。看见

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