Элементы формы не работают с div, перекрывающим модальное окно начальной загрузки

Я пытаюсь перекрыть 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

28.08.2024 03:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема заключается в том, что модальная загрузка мешает вашему пользовательскому модальному модулю. Поэтому, если вы используете инструменты разработки, а затем удаляете модальное окно начальной загрузки из html, тогда ваше пользовательское модальное окно со ссылкой Google работает нормально, и вы также можете добавить ценность к входным данным.

Говорим о решении. Я пытался исправить проблему с помощью z-index, но это не сработало, поэтому я использовал js, в котором, когда ваша пользовательская модальная видимость установлена на видимую, она также устанавливает модальный загрузочный display на none.

Ниже приведен рабочий пример, а также небольшое примечание: не используйте js непосредственно внутри элемента html, это не очень хорошая практика.

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>

Скрытие текущего открытого модального окна на самом деле является хорошим и работающим трюком. Спасибо!

— 28.08.2024 07:28

28.08.2024 06:24