如何在引导模式中放置自定义关闭按钮

问题描述 投票：0回答：1

我正在开发一个项目，需要创建一个 Bootstrap 模式，并在右上角放置一个关闭按钮。虽然我已经设法使用 CSS 来定位按钮，但它并没有完全固定在一个位置。尽管应用了绝对定位，按钮的移动似乎不一致。我尝试通过调整 CSS 属性并检查浏览器开发人员工具中的元素来解决该问题，但我一直无法找到解决方案。

enter image description here

HTML

 <div class="modal fade" id="POD__Modal" tabindex="-1" aria-labelledby="POD__ModalLabel" aria-hidden="true">
      <div id="modal__close" class="  sticky-top">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-dialog">
        
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="POD__ModalLabel">Proof of delivery</h5>
            
            </div>
          <div class="modal-body">
            <figure class="zoom" onmousemove="zoom(event)" style="background-image: url(https://i.guim.co.uk/img/media/70a2fd5f5acddd683b892245209974fa4c768498/324_0_1429_858/master/1429.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=e2b8991e17e7bd966a29f5c706fe2552)">
              <img src="https://i.guim.co.uk/img/media/70a2fd5f5acddd683b892245209974fa4c768498/324_0_1429_858/master/1429.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=e2b8991e17e7bd966a29f5c706fe2552" />
            </figure>
          </div>
          
        </div>
      </div>
    </div>

CSS

/* POD Image Modal  */
#POD__Modal .modal-body {
  padding: 0px;
}

#POD__Modal .modal-header {
  justify-content: space-around;
  color: var(--primary-color);
}

#POD__Modal #modal__close {
  position: absolute;
  margin-right: auto;
  margin-left: auto;
  top: -0.1rem;
  right: 0rem;
  z-index: 999999;
  padding: 5px;
  border-radius: 50%;
  background-color: var(--secondary-color);
}
#POD__Modal .btn-close
{
  filter:  invert(1) grayscale(100%) brightness(300%) hue-rotate(180deg);
}

#POD__Modal .modal-content {
  border: 2px solid var(--secondary-color);
  border-radius: 1rem;
}

#POD__Modal .modal-body {
  border-bottom-left-radius: 1rem;
}

#POD__Modal figure.zoom {
  background-position: 50% 50%;
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: zoom-in;
}

#POD__Modal figure.zoom img:hover {
  opacity: 0;
}

#POD__Modal figure.zoom img {
  transition: opacity .5s;
  display: block;
  width: 100%;
 
}
#POD__Modal figure {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

enter image description here

javascript html jquery css bootstrap-5
1个回答
0
投票

您可以操作将模态框的默认关闭按钮放置在那里。

首先，我将关闭按钮代码移至关闭按钮默认所在位置的

modal-header
内。

然后添加这个CSS：

    #POD__Modal .btn-close {
        background-color: #00ff00;
        border-radius: 50%;
        margin-top: -60px;
        margin-right: -30px;
        opacity: 1;
    }

然后删除以下代码，因为您不再需要它们：

HTML：

<div id="modal__close" class="  sticky-top">
</div>

CSS：

#POD__Modal #modal__close {
  position: absolute;
  margin-right: auto;
  margin-left: auto;
  top: -0.1rem;
  right: 0rem;
  z-index: 999999;
  padding: 5px;
  border-radius: 50%;
  background-color: var(--secondary-color);
}

#POD__Modal .btn-close
{
  filter:  invert(1) grayscale(100%) brightness(300%) hue-rotate(180deg);
}

这是一个工作代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        /* POD Image Modal  */
        #POD__Modal .modal-body {
            padding: 0px;
        }

        #POD__Modal .modal-header {
            justify-content: space-around;
            color: var(--primary-color);
        }

        #POD__Modal .modal-content {
            border: 2px solid var(--secondary-color);
            border-radius: 1rem;
        }

        #POD__Modal .modal-body {
            border-bottom-left-radius: 1rem;
        }

        #POD__Modal figure.zoom {
            background-position: 50% 50%;
            position: relative;
            width: 100%;
            overflow: hidden;
            cursor: zoom-in;
        }

        #POD__Modal figure.zoom img:hover {
            opacity: 0;
        }

        #POD__Modal figure.zoom img {
            transition: opacity .5s;
            display: block;
            width: 100%;

        }

        #POD__Modal figure {
            border-bottom-left-radius: 1rem;
            border-bottom-right-radius: 1rem;
        }

        #POD__Modal .btn-close {
            background-color: #00ff00;
            border-radius: 50%;
            margin-top: -60px;
            margin-right: -30px;
            opacity: 1;
        }
    </style>
</head>

<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary m-5" data-bs-toggle="modal" data-bs-target="#POD__Modal">
        Show modal
    </button>
    <div class="modal fade" id="POD__Modal" tabindex="-1" aria-labelledby="POD__ModalLabel" aria-hidden="true">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="POD__ModalLabel">Proof of delivery</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <figure class="zoom" onmousemove="zoom(event)"
                        style="background-image: url(https://i.guim.co.uk/img/media/70a2fd5f5acddd683b892245209974fa4c768498/324_0_1429_858/master/1429.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=e2b8991e17e7bd966a29f5c706fe2552)">
                        <img
                            src="https://i.guim.co.uk/img/media/70a2fd5f5acddd683b892245209974fa4c768498/324_0_1429_858/master/1429.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=e2b8991e17e7bd966a29f5c706fe2552" />
                    </figure>
                </div>

            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.