我使用的是一个引导模式,关闭按钮是一个图像,当模式的大小根据视口而改变时,我希望关闭按钮始终保持在模式的右上角
<div id="myModal" class="modal modal fade">
<a class="close-modal" href="javascript:void(0)" onclick=closeModalBox()>
<img src="images/close.png" width="39" >
</a>
<div class="modal-dialog">
<div class="modal-content" style="position: relative;">
<div class="modal-body" >
<!-- code -->
</div>
</div>
</div>
</div>
字符串
CSS:
.close-modal {
margin: 0;
position: absolute;
opacity: 1;
z-index: 10;
cursor: pointer;
top: 1%;
left: 77%;
}
.modal-content{
position: relative;
}
型
有什么想法吗?谢谢
4条答案
按热度按时间holgip5t1#
似乎有一个html结构的问题,见下面的例子,保持关闭按钮在正确的位置。也参考这个链接。Modal
字符串
puruo6ea2#
你的意思是在向下滚动的时候保持按钮吗?如果是这样的话,使用“粘性”变量,
https://getbootstrap.com/docs/4.0/utilities/position/
bprjcwpo3#
使用Bootstrap v5.3,您可以将按钮位置设置为绝对位置,而无需额外的CSS:
字符串
position-relative
将容器设置为相对容器position-absolute
将关闭按钮设置为绝对(在容器中)top-0
将关闭按钮设置到容器的顶部end-0
将关闭按钮设置到容器的右侧m-2
设置一些边距以在按钮周围留出一些空间结果如下:
cuxqih214#
您使用的百分比值会在设备大小之间发生变化。将这些值设置为固定值,以便关闭按钮始终位于相对于设备大小的特定位置。此外,由于您使用的是绝对定位,因此可以利用“right”属性。https://www.w3schools.com/cssref/pr_pos_right.asp
字符串