Как средствами CSS реализовать плавное закрытие модального диалога?

Question

Пишу модальный диалог. В качестве примера взял этот диалог. Но делаю без bootstrap'a.

Единственное, что осталось реализовать, это эффект плавного закрытия.

Как это сделать правильно? Можно ли реализовать это только с помощью CSS? Или без JS никак?

И еще момент, как растянуть линии межу header, body, footer на всю длину блок?

function showModal() {
    let div_modal = document.querySelector("div.modal");

    let button_close = document.querySelector("button#close");
    let button_yes = document.querySelector("button#yes");
    let button_no = document.querySelector("button#no");

    function window_onclick(event) {
        if (event.target === div_modal) {
            closeDialog();
        }
    }
    window.addEventListener('click', window_onclick, false);

    function button_yes_onclick(event) {
        // setSignal(signal, value);
        closeDialog();
    }
    button_yes.addEventListener('click', button_yes_onclick, false);

    function button_no_onclick(event) {
        closeDialog();
    }
    button_no.addEventListener('click', button_no_onclick, false);
    button_close.addEventListener("click", button_no_onclick, false);

    function closeDialog() {
        div_modal.style.display = "none";
        // Необходимо удалять назначенные обработчики, иначе они будут накапливаться.
        // Для проверки можно использовать: getEventListeners(object) в консоли Chrome.
        window.removeEventListener('click', window_onclick);
        button_yes.removeEventListener('click', button_yes_onclick);
        button_no.removeEventListener('click', button_no_onclick);
        button_close.removeEventListener('click', button_no_onclick);
    }

    div_modal.style.display = "block";  // показать диалог
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  /*background-color: rgb(0, 0, 0); !* Fallback color *!*/
  /*background-color: rgba(0, 0, 0, 0.5); !* Black w/ opacity *!*/
  animation-name: show-modal;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;  /*сохранить результат анимации*/
}

@keyframes show-modal {
  to {background-color: rgba(0, 0, 0, 0.5)}
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: white;
  margin: auto;
  padding: 0;
  border: 10px solid white;
  border-radius: 6px;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: #333333;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: #cbcbcb;
  float: right;
  font-size: 28px;
  font-weight: bold;
  border: 0;
  background-color: transparent;
}

.close:hover,
.close:focus {
  color: #7f7f7f;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 0 16px;
  line-height: 4em;
}

.modal-body {
  padding: 10px 16px;
}

.modal-footer {
  padding: 16px 16px 0 0;  /*top right bottom left*/
  text-align: right;
}

.modal-footer > button {
  width: 62px;
  height: 34px;
  background-color: white;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.modal-footer > button:hover {
  background-color: #e6e6e6;
  cursor: pointer;
}

.line {
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>examole</title>
  <meta charset="utf-8">
</head>
<body>

<div class="container">
  <button type="button" onclick="showModal()">Open Modal</button>

  <!-- Modal -->
  <div class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <button class="close" id="close">&times;</button>
            <h2>Подтверждение</h2>
        </div>
        <div class="line"></div>
        <div class="modal-body">
            <p>Вы уверены, что хотите изменить значение сигнала?</p>
        </div>
        <div class="line"></div>
        <div class="modal-footer">
            <button type="button" id="yes">Да</button>
            <button type="button" id="no">Нет</button>
        </div>
    </div>
  </div>
  
</div>

</body>
</html>

Answer 1

Используйте свойство transition вместо animation и добавляйте нужный класс. Переключение display не даст возможность применять свойство animation. Пример:

function showModal() {
  let div_modal = document.querySelector("div.modal");
  let div_content = document.querySelector("div.modal-content");

  let button_close = document.querySelector("button#close");
  let button_yes = document.querySelector("button#yes");
  let button_no = document.querySelector("button#no");

  function window_onclick(event) {
    if (event.target === div_modal) {
      closeDialog();
    }
  }
  window.addEventListener('click', window_onclick, false);

  function button_yes_onclick(event) {
    // setSignal(signal, value);
  }
  button_yes.addEventListener('click', button_yes_onclick, false);

  function button_no_onclick(event) {
    closeDialog();
  }
  button_no.addEventListener('click', button_no_onclick, false);
  button_close.addEventListener("click", button_no_onclick, false);

  function closeDialog() {
    //div_modal.style.display = "none";
    div_modal.classList.remove('show__modal');
    div_content.classList.remove('show');
    // Необходимо удалять назначенные обработчики, иначе они будут накапливаться.
    // Для проверки можно использовать: getEventListeners(object) в консоли Chrome.
    window.removeEventListener('click', window_onclick);
    button_yes.removeEventListener('click', button_yes_onclick);
    button_no.removeEventListener('click', button_no_onclick);
    button_close.removeEventListener('click', button_no_onclick);
  }

  //div_modal.style.display = "block"; // показать диалог
  div_modal.classList.add('show__modal');
  div_content.classList.add('show');
}

/* The Modal (background) */

.modal {
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 10px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  /*background-color: rgb(0, 0, 0); !* Fallback color *!*/
  /*background-color: rgba(0, 0, 0, 0.5); !* Black w/ opacity *!*/
  background-color: rgba(0, 0, 0, 0.5);
  top: -100%;
  opacity: 0;
  transition: top 1.0s, opacity 1.0s;
}

.show__modal {
top: 0;
  opacity: 1;
}


/* Modal Content */

.modal-content {
  position: relative;
  background-color: white;
  margin: auto;
  padding: 5px 0 10px 0;
  /*border: 10px solid white;*/
  border-radius: 6px;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: #333333;
  top: -100%;
  opacity: 0;
  transition: top 1.5s, opacity 1.0s;
}

.show {
  top: 0;
  opacity: 1;
}


/* The Close Button */

.close {
  color: #cbcbcb;
  float: right;
  font-size: 28px;
  font-weight: bold;
  border: 0;
  background-color: transparent;
}

.close:hover,
.close:focus {
  color: #7f7f7f;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 10px;
  /*line-height: 4em;*/
}

.modal-body {
  padding: 10px 16px;
}

.modal-footer {
  padding: 16px 16px 0 0;
  /*top right bottom left*/
  text-align: right;
}

.modal-footer>button {
  width: 62px;
  height: 34px;
  background-color: white;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.modal-footer>button:hover {
  background-color: #e6e6e6;
  cursor: pointer;
}

.line {
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>examole</title>
  <meta charset="utf-8">
</head>

<body>

  <div class="container">
    <button type="button" onclick="showModal()">Open Modal</button>

    <!-- Modal -->
    <div class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" id="close">&times;</button>
          <h2>Подтверждение</h2>
        </div>
        <div class="line"></div>
        <div class="modal-body">
          <p>Вы уверены, что хотите изменить значение сигнала?</p>
        </div>
        <div class="line"></div>
        <div class="modal-footer">
          <button type="button" id="yes">Да</button>
          <button type="button" id="no">Нет</button>
        </div>
      </div>
    </div>

  </div>

</body>

</html>

БЛОГ НА HUSL

Как средствами CSS реализовать плавное закрытие модального диалога?

Ответы (1 шт):