Блог

Главная - Вопросы по программированию - CSS: значок всплывающего окна появляется немного позже

CSS: значок всплывающего окна появляется немного позже

#css #angular

#css #angular

Вопрос:

У меня есть такое всплывающее окно, в котором есть icone, половина которого находится немного выше всплывающей формы :

введите описание изображения здесь

Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю на кнопку удаления, значок перемещается из места в нижней части в верхнюю часть, где он должен быть :

демонстрация того, что происходит со значком

Вот мой код : 

 .modal-confirm {
  color: #636363;
}

.modal-confirm .modal-content {
  padding: 20px;
  border-radius: 5px;
  border: none;
  text-align: center;
  font-size: 14px;
}

.modal-confirm .modal-header {
  border-bottom: none;
  position: relative;
}

.modal-confirm h4 {
  text-align: center;
  font-size: 26px;
  margin: 30px 0 -10px;
}

.modal-confirm .close {
  position: absolute;
  top: -5px;
  right: -2px;
}

.modal-confirm .modal-body {
  color: #999;
}

.modal-confirm .modal-footer {
  border: none;
  text-align: center;
  border-radius: 5px;
  font-size: 13px;
}

.modal-confirm .modal-footer a {
  color: #999;
}

.modal-confirm .icon-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 225px;
  width: 65px;
  height: 65px;
  margin: 0 auto;
  border-radius: 50%;
  z-index: 9;
  padding: 15px;
  background: #e42929;
  text-align: center;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.modal-confirm .icon-box i {
  color: #faf6f6;
  font-size: 50px;
  display: inline-block;
  margin-top: 8px;
}

.modal-confirm .btn {
  color: #fff;
  border-radius: 4px;
  background: #60c7c1;
  text-decoration: none;
  transition: all 0.4s;
  line-height: normal;
  min-width: 120px;
  border: none;
  min-height: 40px;
  border-radius: 3px;
  margin: 0 5px;
  outline: none !important;
}

.modal-confirm .btn-info {
  background: #c1c1c1;
}

.modal-confirm .btn-info:hover,
.modal-confirm .btn-info:focus {
  background: #a8a8a8;
}

.modal-confirm .btn-danger {
  background: #f15e5e;
}

.modal-confirm .btn-danger:hover,
.modal-confirm .btn-danger:focus {
  background: #ee3535;
}

.trigger-btn {
  display: inline-block;
  margin: 100px auto;
}  
 <div id="myModal" class="modal fade">
  <div class="modal-dialog modal-confirm">
    <div class="modal-content">
      <div class="icon-box">
        <i class="material-icons">amp;#xE5CD;</i>
      </div>
      <div class="modal-header">
        <h4 class="modal-title">Are you sure?</h4>
      </div>
      <div class="modal-body">
        <p>Do you really want to delete this item? This process cannot be undone.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" (click)="onCancelClick()">Cancel</button>
        <button type="button" class="btn btn-danger" (click)="onDeleteClick()">Delete</button>
      </div>
    </div>
  </div>
</div>

Комментарии:

1. пожалуйста, сделайте фрагмент