表单元素无法在与引导模式重叠的 div 上工作

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

我试图仅使用 

div
和 
css
在引导模式上重叠 
javascript
，但 
form
元素甚至不可单击，因此除了 
select
之外，我无法更改它们的值。

引导模式

<button type="button" data-bs-toggle="modal" data-bs-target="#sampleModal" id="sampleModalBtn">show modal</button>
<div class="modal fade" id="sampleModal" tabindex="-1" role="dialog" aria-labelledby="sampleModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold"><span class="pe-2">Sample Modal</span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <button type="button" onclick="document.getElementById('overlapDivCon1').style.visibility = 'visible'">overlap div1</button>
                <button type="button">overlap div2</button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-md" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

重叠div

<div class="d-flex justify-content-center overlapDivContainer" id="overlapDivCon1">
    <div class="border border-secondary bg-white rounded-3 shadow overlapDiv">
        <div class="p-2 border-bottom">
            <form>
                <a href="https://www.google.com" target="blank">check google</a>
                <input type="text" class="form-control form-control-sm mb-2" placeholder="type text here">
                <input type="number" class="form-control form-control-sm mb-2" placeholder="type number here">
                <input type="date" class="form-control form-control-sm mb-2">
                <select class="form-select form-select-sm mb-2">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
                <textarea></textarea>
            </form>
        </div>
    </div>
</div>

css

.overlapDivContainer {
  background-color: rgba(0,0,0,.6);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1056;
  visibility: hidden;
}
.overlapDiv {
  width: 60%;
  margin-top: 2%;
}
javascript html css
1个回答
0
投票

问题在于引导模式与您的自定义模式混淆。因此，如果您使用开发工具，然后从 html 中删除引导模式，那么带有 google 链接的自定义模式将正常工作，您也可以为输入添加值。

谈论解决方案。我尝试使用 

z-index
修复问题，但它不起作用，所以我使用了 
js
，其中当您的自定义模式可见性设置为可见时，它还会将引导模式 
display
设置为 
none
。

下面是工作示例，也请注意不要直接在 html 元素中使用 js，这不是一个好的做法。

function toggleSecondModal() {
  let bootstrapModal = document.querySelector(".modal");
  let customModal = document.getElementById('overlapDivCon1');

  customModal.style.visibility = 'visible';
  bootstrapModal.style.display = "none";
}
body {
  margin: 0;
  padding: 0;
}

.mainDiv {
  color: white;
  width: 100%;
  height: 100vh;
  background-color: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlapDivContainer {
  background-color: rgba(0, 0, 0, .6);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1056;
  visibility: hidden;
}

.overlapDiv {
  width: 60%;
  margin-top: 2%;
}
<!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">
</head>
</head>

<body>

  <div class="mainDiv">
    <button type="button" data-bs-toggle="modal" data-bs-target="#sampleModal" id="sampleModalBtn">show modal</button>
    <div class="modal fade" id="sampleModal" tabindex="-1" role="dialog" aria-labelledby="sampleModalLabel" aria-hidden="true" data-bs-backdrop="static">
      <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title fw-bold"><span class="pe-2">Sample Modal</span></h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <button id="btnOne" type="button" onclick="toggleSecondModal()">overlap div1</button>
            <button type="button">overlap div2</button>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary btn-md" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex justify-content-center overlapDivContainer" id="overlapDivCon1">
      <div class="border border-secondary bg-white rounded-3 shadow overlapDiv">
        <div class="p-2 border-bottom">
          <form>
            <a href="https://www.google.com" target="blank">check google</a>
            <input type="text" class="form-control form-control-sm mb-2" placeholder="type text here">
            <input type="number" class="form-control form-control-sm mb-2" placeholder="type number here">
            <input type="date" class="form-control form-control-sm mb-2">
            <select class="form-select form-select-sm mb-2">
              <option value="1">1</option>
              <option value="2">2</option>
            </select>
            <textarea></textarea>
          </form>
        </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.