如何创建“模态”底部横幅
我使用的框架：MDB。
我想创建一种放置在底部的 div，当用户滚动时，它会继续跟随页面，有点像粘性内容。
在MDB网站上，有一个解决方案是模态底部，我可以通过JavaScript自动打开它，而无需用户按下按钮，问题是它完全掩盖了<body>
怎样才能达到这样的效果而又不让页面黑屏呢？
代码：
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#frameModalBottom">
Launch demo modal
</button>
<!-- Frame Modal Bottom -->
<div class="modal fade bottom" id="frameModalBottom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<!-- Add class .modal-frame and then add class .modal-bottom (or other classes from list above) to set a position to the modal -->
<div class="modal-dialog modal-frame modal-bottom" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row d-flex justify-content-center align-items-center">
<p class="pt-3 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo
provident fugiat reprehenderit nostrum
quos..
</p>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- Frame Modal Bottom -->
胡子哥哥3回答
-
天涯尽头无女友
.modal-backdrop { display:none; } -
HUX布斯
我想创建一种放置在底部的 div，当用户滚动时，它会继续跟随页面，有点像粘性内容。你可以用position:sticky它来粘在底部......这是“有点像粘”#content { height: 800px; border: 1px solid red;}#bottom { border: 1px solid blue; width: 100%; background-color: #CCC; text-align: center; position: sticky; bottom: 0;}<div id="content"></div><div id="bottom"> bottom</div>如果您愿意，可以小提琴： https: //jsfiddle.net/c0me5d63/如果您不想/不能使用position:sticky那么您可以使用position:fixed#content { height: 800px; border: 1px solid red; margin-bottom:1.5em;}#bottom { border: 1px solid blue; width: 100%; background-color: #CCC; text-align: center; position:fixed; bottom:0;}<div id="content"></div><div id="bottom"> bottom</div> -
潇潇雨雨
这可以通过消除黑滴的不透明度来完成.modal-backdrop { opacity:0.5 !important; }
随时随地看视频慕课网APP
相关分类
JavaScript