0

У меня возникла проблема с модальным окном, а именно, у него крайне странно отображается фон. В то время как он(тёмный фон модального окна) должен перекрывать весь экран, он отображается в виде небольшой полоски.

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

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;700&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  margin: 0;
}

p {
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 400;
  font-size: 21px;
}

.fa-plus {
  margin-right: 11px;
}

#myBtn {
  font-size: 16px;
  font-weigth: 600;
  color: #fff;
  border: 0 solid;
  border-radius: 20px;
  padding: 12px 30px;
  background-color: #000;
  text-align: center;
  margin-left: 20px;
  margin-top: 20px;
}

button:focus {
  outline: none;
}

#myBtn:hover {
  background-color: #3C3C3C;
  transition: .2s;
}

button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
  box-shadow: 0 0 0 3px gray;
}

.modal {
  display: none;
  position: relative;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100px;
  background-color: rgba(90, 90, 114, 0.5);
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 50%;
  border-radius: 30px;
  text-align: center;
  font-weight: regular;
}

.modal-title {
  font-size: 21px;
}

.close {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
  margin-right: -20px;
  float: left;
  font-size: 21px;
  font-weight: 400;
  cursor: pointer;
  color: #000;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #FFAAAA;
}
<button id="myBtn">Создать событие</button>

<div class="modal" id="myModal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h1 class="modal-title">Создание события
      <h1/>
      <hr>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil consequuntur asperiores ut! Tempore excepturi voluptatibus perferendis vel, repellendus provident adipisci odio distinctio, pariatur unde hic odit magni, nam officia ipsa!</p>
  </div>
</div>

1 ответ 1

1

Как-то так чтоли?

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;700&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  margin: 0;
}

p {
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 400;
  font-size: 21px;
}

.fa-plus {
  margin-right: 11px;
}

#myBtn {
  font-size: 16px;
  font-weigth: 600;
  color: #fff;
  border: 0 solid;
  border-radius: 20px;
  padding: 12px 30px;
  background-color: #000;
  text-align: center;
  margin-left: 20px;
  margin-top: 20px;
}

button:focus {
  outline: none;
}

#myBtn:hover {
  background-color: #3C3C3C;
  transition: .2s;
}

button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
  box-shadow: 0 0 0 3px gray;
}

.modal {
  display: none;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(90, 90, 114, 0.5);
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 50%;
  border-radius: 30px;
  text-align: center;
  font-weight: regular;
}

.modal-title {
  font-size: 21px;
}

.close {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
  margin-right: -20px;
  float: left;
  font-size: 21px;
  font-weight: 400;
  cursor: pointer;
  color: #000;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #FFAAAA;
}
<button id="myBtn">Создать событие</button>

<div class="modal" id="myModal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h1 class="modal-title">Создание события
      <h1/>
      <hr>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil consequuntur asperiores ut! Tempore excepturi voluptatibus perferendis vel, repellendus provident adipisci odio distinctio, pariatur unde hic odit magni, nam officia ipsa!</p>
  </div>
</div>

Всё дело в стилях. Вам бы по хорошему вычислять

width: 100%; height: 100%; чтобы не было проблем

Ваш ответ

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

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