Я делаю login и пробую сообщение pop up, но Вы не являетесь сообщением, когда я даю clic в моих тестах, но да они являются эффектами, связанными с появлением pop up как изменением цвета фонда.
Я основываюсь на следующем видео.
Проблема - что-то в CSS, но я не могу идентифицировать это.
$(document).ready(function() {
$('.trigger').on('click', function() {
$('.modal-wrapper').toggleClass('open');
$('.container').toggleClass('blur-it');
return false;
})
});
/*Dividí el CSS en dos partes, la primera contiene el estilo del login y la segunda del pop up.*/
.modal-wrapper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(41, 171, 164, 0.8);
visibility: hidden;
opacity: 0;
transition: all 0.25s ease-in-out;
}
.modal-wrapper.open {
opacity: 1;
visibility: visible;
}
.blur-it {
filter: blur(4px);
}
.modal {
width: 30%;
height: 20%;
display: block;
margin: 50% 0 0 -300px;
position: relative;
top: 50%;
left: 50%;
background: white;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.modal-wrapper.open.modal {
margin-top: -200px;
opacity: 1;
}
.head {
width: 90%;
height: 32px;
padding: 12px 30px;
overflow: hidden;
background: #e2525c;
}
.btn-close {
font-size: 28px;
display: block;
float: right;
color: white;
}
.contentM {
padding: 10%;
}
.good-job {
text-align: center;
font-family: Tahoma;
color: #e2525c;
}
.good-job .fa-thumbs-o-up {
font-size: 60px;
}
.good-job h1 {
font-size: 45px;
}
Я вижу несколько Ошибок сначала вижу, что в cГіdigo, что ты поднимаешься, у тебя нет ссылки на JQuery
, помни, что необходима для Вашего функционирования и секунда , у тебя есть ошибка в CSS
в этом фрагменте .modal {
у тебя есть плохо свойство opacity
, если ты меняешь 0 в другую стоимость, оно будет функционировать, кроме того у тебя есть margin
в этом же самом классе ты считаешь это очень высоким, что скрывает модального, cГЎmbialo поэтому для того, чтобы ты смог видеть, как появляется модальный.
я Тебе оставляю ты snippet измененные , я надеюсь, что он помогает:
$(document).ready(function() {
$('.trigger').on('click', function() {
$('.modal-wrapper').toggleClass('open');
$('.container').toggleClass('blur-it');
return false;
})
});
/*Dividí el CSS en dos partes, la primera contiene el estilo del login y la segunda del pop up.*/
.modal-wrapper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(41, 171, 164, 0.8);
visibility: hidden;
opacity: 0;
transition: all 0.25s ease-in-out;
}
.modal-wrapper.open {
opacity: 1;
visibility: visible;
}
.blur-it {
filter: blur(4px);
}
.modal {
width: 50%;
height: 50%;
display: block;
margin: 1px 0px 0px -25%;
margin-top: -10%;
position: relative;
top: 50%;
left: 50%;
background: white;
opacity: 25;
transition: all 0.5s ease-in-out;
}
.modal-wrapper.open.modal {
margin-top: -200px;
opacity: 1;
}
.head {
width: 92.5%;
height: 32px;
padding: 12px 30px;
background: #e2525c;
}
.btn-close {
font-size: 28px;
float: right;
color: white;
}
.contentM {
padding: 10%;
}
.good-job {
text-align: center;
font-family: Tahoma;
color: #e2525c;
}
.good-job .fa-thumbs-o-up {
font-size: 60px;
}
.good-job h1 {
font-size: 45px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="simple-message" type="button" class="btn btn-primary trigger">
Basic Message
</button>
<div class="modal-wrapper">
<div class="modal">
<div class="head">
<a href="" class="btn-close trigger">
<i class="fa fa-times">x</i>
</a>
</div>
<div class="contentM">
<div class="good-job">
<i class="fa fa-thumbs-o-up"></i>
<h1>Good Job</h1>
</div>
</div>
</div>
</div>