У меня возникла проблема с модальным окном, а именно, у него крайне странно отображается фон. В то время как он(тёмный фон модального окна) должен перекрывать весь экран, он отображается в виде небольшой полоски.
Прошу у вас помощи, т.к не могу понять из-за чего возникла такая проблема.
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">×</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>