Я столкнулся с особой проблемой. Мое приложение показывает 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> добавляется и удаляется, оставляя предыдущий еще на странице!
Рис при запуске приложения:
Рис, когда я нажимаю закрыть:
