Эффект всплывания окна

Question

Есть окно

<!doctype html>
<html>

<head>
  <title>Comebacker</title>
  <link type="text/css" rel="stylesheet" href="comebacker/css.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    < /script <
    script type = "text/javascript"
    src = "comebacker/script.js" >
  </script>
  <!--<script src="jquery-3.6.1.min.js"></script>-->
  <!--<script src="myPopupWindow.js"></script>-->
</head>

<body>
  TestContent
  <div id="comebacker">
    <div class="close-undermodal"></div>
    <div class="over-window">
      <div class="close-over"></div>
      <div class="title-comebacker">
        <div>Order today!</div>
        Only: 15 $.
        <div>50% discount</div>
      </div>
      <div class="form">
        <form method="post" action="">
          <input type="text" name="name" value="" placeholder="Name" />
          <input type="text" name="phone" value="" placeholder="Phone" />
          <input type="submit" name="submit" value="Order" />
        </form>
      </div>
      <!--<div class="clear"></div>-->
    </div>
  </div>
</body>

</html>

Есть css стиль для этого окна

/* modal */
#comebacker {
    background: url(img/bgexit.png);
    position: fixed;
    left: 0;
    top: 0; 
    z-index: 9999;
    width: 100%;
    height: 100%; 
    overflow: auto;
    display: none;
}

Для появления окна #comebacker необходимо изменить свойство display: none на display: block. Но мне нужно добиться эффекта всплывания окна. Каким образом в js (и jquery) это можно сделать (исключая fadeIn и fadeOut)? Возможно использование свойства opacity или каких-то других свойств. (как присвоить свойству opacity - 1 в js/jquery, если есть какие-то другие способы пишите)

P.S. А как сделать так, чтобы всплывающее (popup) окно возникало при клике на кнопку Назад или при закрытии вкладки (см. ru.stackoverflow.com/questions/1450549/…)? Т.е. окно popup должно возникать внутри обработчиков событий $(window).on('popstate', ...) и $(window).on('beforeunload', ...). Проблема c e.preventDefault(), невозможно предотвратить действия по умолчанию, т.е. чтобы вместо перехода на предыдущую страницу или закрытия вкладки возникало всплывающее окно.

Answer 1

Как-то так попробуй, замени opacity на свои эффекты, так должен и block сработать и плавность эффектов.

let yourElem = document.getElementById('comebacker');
yourElem.style.display = 'block';
setTimeout(()=>{
   yourElem.style.opacity = '1';
}, 10)

Answer 2

Критикуешь - предлагай, как говорится, вот моё решение вашего вопроса, контент попапа уже на ваше усмотрение. Также заменил высоту попапа с 100% (вся ширина родительского блока) на 100vh (это вся высота экрана пользователя).

let popup = document.querySelector('#comebacker')

document.querySelector('#open-popup').addEventListener('click', () => {
  popup.style.cssText = `
  display: block;
  opacity: 0;`
  setTimeout(() => {
    popup.style.opacity = '1'
  }, 1)
})

window.addEventListener('click', e => {
  if(e.explicitOriginalTarget === popup) {
  popup.style.opacity = 0
  setTimeout(() => {
    popup.style.display = 'none'
  }, 301)
  }
})

#comebacker {
    background: url(img/bgexit.png) rgba(0, 0, 0, .5);
    position: fixed;
    left: 0;
    top: 0; 
    z-index: 9999;
    width: 100%;
    height: 100vh; 
    display: none;
    color: rgb(255, 255, 255);
    transition: .3s;
}

<span id="open-popup">Click At Me!</span>

<div id="comebacker">
<span>Some Content Here</span>
</div>

К слову если вам нужно расположить контент поапа в центре то просто используйте вот такие вот стили:

#comebacker {
  display: grid; /* Или flex */
  justify-content: center;
  align-items: center;
}

БЛОГ НА HUSL

Эффект всплывания окна

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