对于几乎完全相同的html，获取引导程序的不同行为 [英] Getting different behaviour of bootstrap for almost identical html
问题描述
我正面临一个特殊的问题.我的应用程序在启动时显示了Bootstrap模态.但是，一旦单击OK关闭modal，Bootstrap就不会删除<div class="modal-backdrop fade show"></div>.因此，后台的控件变得不可单击.
I am facing a peculiar issue. My application shows a Bootstrap modal at start up. But once I click OK to close the modal, Bootstrap doesn't remove the <div class="modal-backdrop fade show"></div>. Due to this the controls in the background become unclickable.
为调试该问题，我想创建一个具有类似行为的独立简单应用程序，但我注意到在该应用程序中，Bootstrap删除了backdrop.我比较了我的主应用程序和示例应用程序的html，它们几乎相同.我可能会犯什么错误?您可能需要使用一些文件差异工具来比较HTML.
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
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
<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>并将其删除，而上一个<div class="modal-backdrop fade show"></div>仍留在页面中！
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!
应用启动时的图片:
单击关闭时的图片:
推荐答案
问题完全不同.问题出在我展示模态的方式上.参见< div class ="模态背景淡化"/div".占据整个窗口空间
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
我调试它的方式很有趣.我在bootstrap.js中添加了几个console.log，并观察到我添加的消息被重复打印.
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屋！
