1

При нажатии на кнопку Button появляется модальное окно. Однако, при открытии модального окна, его перекрывает блок с текстом на странице. z-index модального окна выставлен больше, чем блока с текстом (10 vs 2). Код модального окна расположен выше блока с текстом в структуре страницы. Что не так? Здесь фрагмент кода страницы: https://codepen.io/albezver/pen/NWNbYaz

const openModalButtons = document.querySelectorAll("[data-modal-target]")
const closeModalButtons = document.querySelectorAll("[data-close-button]")
const overlay = document.getElementById('overlay')

openModalButtons.forEach(button => {
  button.addEventListener("click", () => {
    const modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
  })
})

overlay.addEventListener("click", () => {
  const modals = document.querySelectorAll(".modal.active")
  modals.forEach(modal => {
    closeModal(modal)
  })
})

closeModalButtons.forEach(button => {
  button.addEventListener("click", () => {
    const modal = button.closest(".modal")
    closeModal(modal)
  })
})

function openModal(modal) {
  if (modal == null) return
  modal.classList.add("active")
  overlay.classList.add("active")
}

function closeModal(modal) {
  if (modal == null) return
  modal.classList.remove("active")
  overlay.classList.remove("active")
}
/*Стиль страницы*/

.content {
  position: static;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10%;
  margin-right: 0px;
  margin-left: 0px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.content-wrap {
  position: -webkit-sticky;
  position: sticky;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0px;
}

.main_content {
  position: static;
  width: 65%;
  margin-right: auto;
  margin-left: auto;
}

.main-content-wrap {
  position: -webkit-sticky;
  position: sticky;
  left: auto;
  top: 0%;
  right: auto;
  bottom: 0%;
  display: block;
  width: 95%;
  height: 70%;
  margin-top: 347px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
  -webkit-box-flex: 0;
  -ms-flex: 0 auto;
  flex: 0 auto;
  border-style: solid;
  border-width: 2px;
  border-color: #b6dfd8;
  border-radius: 30px;
  background-color: #f7fcfb;
  text-align: left;
  -o-object-fit: fill;
  object-fit: fill;
}

.main-content-heading {
  width: 37%;
  margin-top: 85px;
  margin-left: 40px;
  font-family: 'Museosanscyrl 700', sans-serif;
  color: #419e8e;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: normal;
}

.main-content-description {
  width: 34%;
  height: 63px;
  margin: 45px 40px 0px;
  font-family: 'Museosanscyrl 500', sans-serif;
  color: #575555;
  font-size: 18px;
  line-height: 30px;
  font-weight: 500;
}

.options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin: 5% auto 0px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.first-option {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 28%;
  height: 183px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 0px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  border-radius: 6px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 40px 0 rgba(47, 163, 143, 0.18);
  box-shadow: 0 0 40px 0 rgba(47, 163, 143, 0.18);
}

.first-option-link {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  width: 100%;
}

.main-content-text {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  z-index: 2;
  display: block;
  overflow: hidden;
  width: 50%;
  height: auto;
  margin-top: 0%;
  margin-right: 60px;
  margin-left: auto;
  padding: 47px 40px 40px;
  border-radius: 30px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 40px 0 rgba(47, 163, 143, 0.18);
  box-shadow: 0 0 40px 0 rgba(47, 163, 143, 0.18);
}

.text {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  margin-right: 0px;
  margin-left: 0px;
  border: 0px none #000;
  border-radius: 30px;
  font-family: 'Museosanscyrl 500', sans-serif;
  color: #575555;
  font-size: 16px;
  line-height: 29px;
  font-weight: 500;
  letter-spacing: 0.2px;
}


/*Стиль модального окна*/

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  -webkit-transition: 200ms ease-in-out;
  -o-transition: 200ms ease-in-out;
  transition: 200ms ease-in-out;
  border: 2px solid rgba(255, 249, 199, 0.53);
  border-radius: 10px;
  z-index: 10;
  background-color: #fff;
  width: 40vw;
  max-width: 80%;
  -webkit-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
}

.modal.active {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  padding: 10px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 2px solid rgba(255, 249, 199, 0.53);
}

.modal-header .modal-title {
  font-size: 1.25rem;
  font-weight: 400;
  font-family: 'Greta text pro', sans-serif;
}

.modal-header .close-button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 1.25rem;
  font-weight: bold;
  color: #2FA38F;
}

.modal-body {
  padding: 10px 15px;
  font-family: 'Museosanscyrl 500', sans-serif;
  color: #575555;
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.2px;
}

#overlay {
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(47, 163, 143, .8);
  pointer-events: none;
}

#overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal-body a {
  display: block;
  font-weight: 600;
  border-radius: 3px;
  text-decoration: none;
  text-align: center;
  margin: 0 auto 33px;
  padding: 20px 0;
  letter-spacing: 0.2px;
}

.button-back {
  width: 164px;
  font-size: 16px;
  color: #2fa38f;
  background-color: #fff;
  border: 1px #2fa38f solid;
}
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div class="content">
    <div class="content-wrap">
      <div class="main_content">
        <div class="main-content-wrap">
          <h2 class="main-content-heading">Lorem Ipsum</h2>
          <div class="main-content-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
          <div class="options">
            <div class="first-option">
              <h3>Button</h3>
              <a href="#" class="first-option-link" data-modal-target="#modal"></a>

              <!-- Модальное окно -->

              <div class="modal" id="modal">
                <div class="modal-header">
                  <div class="modal-title">
                    Lorem Ipsum
                  </div>
                  <button data-close-button class="close-button">&times;</button>
                </div>
                <div class="modal-body">
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at porttitor mi. Ut tincidunt aliquet urna ac ultrices. Sed tincidunt porttitor ipsum a ultrices. Nunc libero metus, scelerisque eget risus quis, porttitor facilisis mi. Suspendisse dictum dolor
                    quis nisi maximus, eget rhoncus felis tincidunt. Quisque a sem in ligula lacinia laoreet et at lorem. Sed fermentum mauris vel volutpat elementum. Proin ultrices nisi vitae urna pharetra, vitae iaculis tellus egestas. In nulla lectus,
                    condimentum eget eleifend eu, lacinia vitae enim.
                  </p>

                  <a href="#" class="button-back" data-close-button>Назад</a>
                </div>
              </div>
              <div id="overlay"></div>

              <!-- -->

            </div>
          </div>
        </div>
      </div>
      <div class="main-content-text">
        <div class="text">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at porttitor mi. Ut tincidunt aliquet urna ac ultrices. Sed tincidunt porttitor ipsum a ultrices. Nunc libero metus, scelerisque eget risus quis, porttitor facilisis mi. Suspendisse
            dictum dolor quis nisi maximus, eget rhoncus felis tincidunt. Quisque a sem in ligula lacinia laoreet et at lorem. Sed fermentum mauris vel volutpat elementum. Proin ultrices nisi vitae urna pharetra, vitae iaculis tellus egestas. In nulla
            lectus, condimentum eget eleifend eu, lacinia vitae enim.</p>
          <p>Vivamus vel augue urna. Proin cursus laoreet nibh. Ut bibendum id purus malesuada tempus. Vivamus varius mattis leo, quis commodo magna consectetur elementum. Fusce malesuada tortor in condimentum maximus. Pellentesque augue turpis, tempus eget
            placerat at, vehicula molestie felis. Donec tincidunt non arcu vel bibendum. Vestibulum nibh quam, pulvinar et felis non, sagittis faucibus orci. Cras quis arcu sit amet mi cursus suscipit vel gravida quam. Nulla tellus diam, ultricies in
            ipsum at, malesuada dapibus quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus nec tortor in sem ornare ornare. Phasellus placerat neque felis. Praesent massa nisi, rutrum et ullamcorper id, feugiat in dui.</p>

        </div>
      </div>
    </div>
  </div>
</body>

</html>

2 ответа 2

2

const openModalButtons = document.querySelectorAll("[data-modal-target]")
const closeModalButtons = document.querySelectorAll("[data-close-button]")
const overlay = document.getElementById('overlay')

openModalButtons.forEach(button => {
  button.addEventListener("click", () => {
    const modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
  })
})

overlay.addEventListener("click", () => {
  const modals = document.querySelectorAll(".modal.active")
  modals.forEach(modal => {
    closeModal(modal)
  })
})

closeModalButtons.forEach(button => {
  button.addEventListener("click", () => {
    const modal = button.closest(".modal")
    closeModal(modal)
  })
})

function openModal(modal) {
  if (modal == null) return
  modal.classList.add("active")
  overlay.classList.add("active")
}

function closeModal(modal) {
  if (modal == null) return
  modal.classList.remove("active")
  overlay.classList.remove("active")
}
/*Стиль страницы*/

.content {
  position: static;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10%;
  margin-right: 0px;
  margin-left: 0px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.content-wrap {
  position: -webkit-sticky;
  position: sticky;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0px;
}

.main_content {
  position: static;
  width: 65%;
  margin-right: auto;
  margin-left: auto;
}

.main-content-wrap {
  position: -webkit-sticky;
  position: sticky;
  left: auto;
  top: 0%;
  right: auto;
  bottom: 0%;
  display: block;
  width: 95%;
  height: 70%;
  margin-top: 347px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
  -webkit-box-flex: 0;
  -ms-flex: 0 auto;
  flex: 0 auto;
  border-style: solid;
  border-width: 2px;
  border-color: #b6dfd8;
  border-radius: 30px;
  background-color: #f7fcfb;
  text-align: left;
  -o-object-fit: fill;
  object-fit: fill;
}

.main-content-heading {
  width: 37%;
  margin-top: 85px;
  margin-left: 40px;
  font-family: 'Museosanscyrl 700', sans-serif;
  color: #419e8e;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: normal;
}

.main-content-description {
  width: 34%;
  height: 63px;
  margin: 45px 40px 0px;
  font-family: 'Museosanscyrl 500', sans-serif;
  color: #575555;
  font-size: 18px;
  line-height: 30px;
  font-weight: 500;
}

.options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin: 5% auto 0px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.first-option {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 28%;
  height: 183px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 0px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  border-radius: 6px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 40px 0 rgba(47, 163, 143, 0.18);
  box-shadow: 0 0 40px 0 rgba(47, 163, 143, 0.18);
}

.first-option-link {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  width: 100%;
}

.main-content-text {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  z-index: 2;
  display: block;
  overflow: hidden;
  width: 50%;
  height: auto;
  margin-top: 0%;
  margin-right: 60px;
  margin-left: auto;
  padding: 47px 40px 40px;
  border-radius: 30px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 40px 0 rgba(47, 163, 143, 0.18);
  box-shadow: 0 0 40px 0 rgba(47, 163, 143, 0.18);
}

.text {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  margin-right: 0px;
  margin-left: 0px;
  border: 0px none #000;
  border-radius: 30px;
  font-family: 'Museosanscyrl 500', sans-serif;
  color: #575555;
  font-size: 16px;
  line-height: 29px;
  font-weight: 500;
  letter-spacing: 0.2px;
}


/*Стиль модального окна*/

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  -webkit-transition: 200ms ease-in-out;
  -o-transition: 200ms ease-in-out;
  transition: 200ms ease-in-out;
  border: 2px solid rgba(255, 249, 199, 0.53);
  border-radius: 10px;
  z-index: 10;
  background-color: #fff;
  width: 40vw;
  max-width: 80%;
  -webkit-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
}

.modal.active {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  padding: 10px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 2px solid rgba(255, 249, 199, 0.53);
}

.modal-header .modal-title {
  font-size: 1.25rem;
  font-weight: 400;
  font-family: 'Greta text pro', sans-serif;
}

.modal-header .close-button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 1.25rem;
  font-weight: bold;
  color: #2FA38F;
}

.modal-body {
  padding: 10px 15px;
  font-family: 'Museosanscyrl 500', sans-serif;
  color: #575555;
  font-size: 16px;
  line-height: 29px;
  letter-spacing: 0.2px;
}

#overlay {
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(47, 163, 143, .8);
  pointer-events: none;
}

#overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal-body a {
  display: block;
  font-weight: 600;
  border-radius: 3px;
  text-decoration: none;
  text-align: center;
  margin: 0 auto 33px;
  padding: 20px 0;
  letter-spacing: 0.2px;
}

.button-back {
  width: 164px;
  font-size: 16px;
  color: #2fa38f;
  background-color: #fff;
  border: 1px #2fa38f solid;
}
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div class="content">
    <div class="content-wrap">
      <div class="main_content">
        <div class="main-content-wrap">
          <h2 class="main-content-heading">Lorem Ipsum</h2>
          <div class="main-content-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
          <div class="options">
            <div class="first-option">
              <h3>Button</h3>
              <a href="#" class="first-option-link" data-modal-target="#modal"></a>

              <!-- -->

            </div>
          </div>
        </div>
      </div>
      <div class="main-content-text">
        <div class="text">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at porttitor mi. Ut tincidunt aliquet urna ac ultrices. Sed tincidunt porttitor ipsum a ultrices. Nunc libero metus, scelerisque eget risus quis, porttitor facilisis mi. Suspendisse
            dictum dolor quis nisi maximus, eget rhoncus felis tincidunt. Quisque a sem in ligula lacinia laoreet et at lorem. Sed fermentum mauris vel volutpat elementum. Proin ultrices nisi vitae urna pharetra, vitae iaculis tellus egestas. In nulla
            lectus, condimentum eget eleifend eu, lacinia vitae enim.</p>
          <p>Vivamus vel augue urna. Proin cursus laoreet nibh. Ut bibendum id purus malesuada tempus. Vivamus varius mattis leo, quis commodo magna consectetur elementum. Fusce malesuada tortor in condimentum maximus. Pellentesque augue turpis, tempus eget
            placerat at, vehicula molestie felis. Donec tincidunt non arcu vel bibendum. Vestibulum nibh quam, pulvinar et felis non, sagittis faucibus orci. Cras quis arcu sit amet mi cursus suscipit vel gravida quam. Nulla tellus diam, ultricies in
            ipsum at, malesuada dapibus quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus nec tortor in sem ornare ornare. Phasellus placerat neque felis. Praesent massa nisi, rutrum et ullamcorper id, feugiat in dui.</p>

        </div>
      </div>
    </div>
  </div>

              <!-- Модальное окно -->

              <div class="modal" id="modal">
                <div class="modal-header">
                  <div class="modal-title">
                    Lorem Ipsum
                  </div>
                  <button data-close-button class="close-button">&times;</button>
                </div>
                <div class="modal-body">
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at porttitor mi. Ut tincidunt aliquet urna ac ultrices. Sed tincidunt porttitor ipsum a ultrices. Nunc libero metus, scelerisque eget risus quis, porttitor facilisis mi. Suspendisse dictum dolor
                    quis nisi maximus, eget rhoncus felis tincidunt. Quisque a sem in ligula lacinia laoreet et at lorem. Sed fermentum mauris vel volutpat elementum. Proin ultrices nisi vitae urna pharetra, vitae iaculis tellus egestas. In nulla lectus,
                    condimentum eget eleifend eu, lacinia vitae enim.
                  </p>

                  <a href="#" class="button-back" data-close-button>Назад</a>
                </div>
              </div>
              <div id="overlay"></div>

</body>

</html>

0

Просто вынесите свое модальное окно ближе к концу документа и будет вам счастье.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.