Создавать модального с HTML5 в ASPX

Question

Создавать модального с HTML5 в ASPX

Я делаю 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;
}

3

time

задан Jheyman Mejia 08.11.2019, 14:34

Ссылка

1 ответ

Похожие вопросы

FRANCISCO J. BLANCO · Accepted Answer · 01.12.2019, 12:16

Я вижу несколько Ошибок сначала вижу, что в 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>

Функционировала Верно solució n, что мне был далеко. Большое спасибо — Federico Palacio, 09.11.2019, 16:02

Создавать модального с HTML5 в ASPX

Good Job

Теги

Похожие вопросы