Bootstrap 保持关闭按钮在右上角,即使模态缩放

xqkwcwgp  于 2023-11-15  发布在  Bootstrap
关注(0)|答案(4)|浏览(192)

我使用的是一个引导模式,关闭按钮是一个图像,当模式的大小根据视口而改变时,我希望关闭按钮始终保持在模式的右上角

  1. <div id="myModal" class="modal modal fade">
  2. <a class="close-modal" href="javascript:void(0)" onclick=closeModalBox()>
  3. <img src="images/close.png" width="39" >
  4. </a>
  5. <div class="modal-dialog">
  6. <div class="modal-content" style="position: relative;">
  7. <div class="modal-body" >
  8. <!-- code -->
  9. </div>
  10. </div>
  11. </div>
  12. </div>

字符串
CSS:

  1. .close-modal {
  2. margin: 0;
  3. position: absolute;
  4. opacity: 1;
  5. z-index: 10;
  6. cursor: pointer;
  7. top: 1%;
  8. left: 77%;
  9. }
  10. .modal-content{
  11. position: relative;
  12. }


有什么想法吗?谢谢

holgip5t

holgip5t1#

似乎有一个html结构的问题,见下面的例子,保持关闭按钮在正确的位置。也参考这个链接。Modal

  1. <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  2. <div class="modal-dialog" role="document">
  3. <div class="modal-content">
  4. <div class="modal-header">
  5. <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
  6. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  7. <span aria-hidden="true">&times;</span>
  8. </button>
  9. </div>
  10. <div class="modal-body">
  11. ...
  12. </div>
  13. <div class="modal-footer">
  14. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  15. <button type="button" class="btn btn-primary">Save changes</button>
  16. </div>
  17. </div>
  18. </div>
  19. </div>

字符串

展开查看全部
puruo6ea

puruo6ea2#

你的意思是在向下滚动的时候保持按钮吗?如果是这样的话,使用“粘性”变量,
https://getbootstrap.com/docs/4.0/utilities/position/

bprjcwpo

bprjcwpo3#

使用Bootstrap v5.3,您可以将按钮位置设置为绝对位置,而无需额外的CSS:

  1. <div class="modal-header position-relative pb-0">
  2. <h1 class="modal-title fs-1 luckiest" id="menu-modal-label">Menu</h1>
  3. <button type="button" class="btn-close position-absolute top-0 end-0 m-2" data-bs-dismiss="modal" aria-label="Close"></button>
  4. </div>

字符串

  • position-relative将容器设置为相对容器
  • position-absolute将关闭按钮设置为绝对(在容器中)
  • top-0将关闭按钮设置到容器的顶部
  • end-0将关闭按钮设置到容器的右侧
  • m-2设置一些边距以在按钮周围留出一些空间

结果如下:

展开查看全部
cuxqih21

cuxqih214#

您使用的百分比值会在设备大小之间发生变化。将这些值设置为固定值,以便关闭按钮始终位于相对于设备大小的特定位置。此外,由于您使用的是绝对定位,因此可以利用“right”属性。https://www.w3schools.com/cssref/pr_pos_right.asp

  1. .close-modal {
  2. margin: 0;
  3. position: absolute;
  4. opacity: 1;
  5. z-index: 10;
  6. cursor: pointer;
  7. top: 50px; // define your value here
  8. right: 80px; // define your value here
  9. }

字符串

相关问题