CSS & JS Effect – Dialog Modal

效果

参考:

Youtube – Create a Simple Popup Modal

Youtube – Create a Modal (Popup) with HTML/CSS and JavaScript

HTML – Native Dialog Modal

Boostrap Modal

Angular Material Dialog

重点

1. modal 就是一个 position: fixed 的大 overlay 黑影, 同时里面有居中的 content box.

2. modal 原本是 hide 起来的, 点击后 show 就可以了.

HTML

<body>

    <button id="js-open-modal-btn" class="open-modal-btn">Open Modal</button>

    <div id="js-modal" class="modal">

      <div class="content">

        <div class="header">

        <h1>You are The Winner!</h1>

          <button id="js-close-modal-btn" class="close-modal-btn"><i class="fa-solid fa-xmark"></i></button>

        </div>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat id, rem veniam ratione modi laboriosam consectetur vitae illum perspiciatis recusandae!</p>

      </div>

    </div>

</body>

modal 负责 backdrop 黑影

content 则是中间白色的内容区域

CSS Style

.open-modal-btn{

  margin-top: 17rem;

  margin-inline: auto;

  display: block;

}

.modal {

  visibility: hidden; // show / hide control

  position: fixed; // 定位

  inset: 0; // full viewport

  background-color: rgb(0 0 0 / 0.2); // backdrop color

  // 居中 content

  display: flex;

  justify-content: center;

  align-items: center;

  .content {

    padding: 2rem 3rem;

    max-width: 1024px;

    background-color: white; // 因为 modal 是透明黑, 所以这里要 set 回白色

    box-shadow: 0 2px 4px rgb(0 0 0 / 0.2); // 影子

    .header{

      display: flex;

      justify-content: space-between;

      align-items: center;

      font-size: 3rem;

      .close-modal-btn {

        background-color: white;

        font-size: inherit;

        color: black;

        border-width: 0;

        cursor: pointer;

      }

    }

    p{

      margin-top: 2rem;

      font-size: 2rem;

    }

  }

  &.show {

    visibility: initial; // clear visibility to show

  }

}

看注释的地方解释就可以了, 其它是点缀而已

JavaScript

const modal = document.querySelector<HTMLElement>('#js-modal')!;

const openModalBtn = document.querySelector<HTMLButtonElement>('#js-open-modal-btn')!;

const closeModalBtn = document.querySelector<HTMLButtonElement>('#js-close-modal-btn')!;

openModalBtn.addEventListener('click', () => {

  modal.classList.add('show');

});

closeModalBtn.addEventListener('click', () => {

  modal.classList.remove('show');

});

只是简单的点击 add class 而已

Body Scroll IOS Safari Problem

modal 开启后, 通常体验不允许 body scroll. 一般的做法是给 body overflow: hidden

但是这个在 Safari 有 bug. 目前 status 是说已经 fixed 了, 但是我没用最新的 safari 测试, 所以不确定.

解决方法是让 body position fixed, 然后修改它的 top 到当前的 scroll top.

下面是我封装的方法

// note: 来龙去脉

// safari 没有办法通过 overflow hide 去阻止 body scroll

// 所以只能把 body 定位变成没有 scroll

// 这个 safari 问题已经很多年的了

// tesla, angular, stackoverflow 也是用这个方案去破

// bootstrap 倒没有处理这个, 比较 noob

// refer:

// https://bugs.webkit.org/show_bug.cgi?id=153852

// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

const showedModals: string[] = [];

export function toggleModal(modalName: string): void {

  showedModals.includes(modalName) ? closeModal(modalName) : openModal(modalName);

}

export function openModal(modalName: string): void {

  if (showedModals.length === 0) {

    const currentScrollTop = (document.scrollingElement ?? document.documentElement).scrollTop;

    document.body.style.position = 'fixed';

    document.body.style.width = '100%';

    document.body.style.top = `-${currentScrollTop}px`;

  }

  showedModals.push(modalName);

}

export function closeModal(modalName: string): void {

  if (!showedModals.includes(modalName)) {

    throw new Error(`Showed modals doesn't contains modal name: ${modalName}`);

  }

  if (showedModals.length === 1) {

    const recoveryScrollTop = Math.abs(parseFloat(document.body.style.top));

    document.body.style.removeProperty('position');

    document.body.style.removeProperty('width');

    document.body.style.removeProperty('top');

    (document.scrollingElement ?? document.documentElement).scrollTop = recoveryScrollTop;

  }

  const indexOf = showedModals.indexOf(modalName);

  showedModals.splice(indexOf, 1);

}

Mobile Back Button Close Dialog

大家习惯按手机的 back button 来试图关闭 Modal,

其实这是一个不正确的操作. 因为 back 会直接跳去上一页而不是关闭 Modal.

为了防止这样的错误体验. 我们可以做一点手脚.

step 1: 在打开 Modal的同时 history.push 放入 query param ?modal="show" (这样之后就可以 back 了)

step 2: 把关闭的操作改成 history.back (统一关闭的方式)

step 3: 监听 onpopstate, 一旦发生就关闭 Modal.

step 4: 如果用户 refresh 那我们需要在 page load 的时候把 ?modal=show 用 history.replace 移除掉

以上的方法思路只是 for 简单场景的. 如果有多层 modal 或者更复杂的情况就 cover 不了了.

JS 代码:

const modal = document.querySelector<HTMLElement>('#js-modal')!;

const openModalBtn = document.querySelector<HTMLButtonElement>('#js-open-modal-btn')!;

const closeModalBtn = document.querySelector<HTMLButtonElement>('#js-close-modal-btn')!;

// 处理 page load

const { pathname, search, hash } = location;

const queryParams = new URLSearchParams(search);

if (queryParams.has('whatsAppDialog')) {

  queryParams.delete('whatsAppDialog');

  const newSearch = queryParams.toString() !== '' ? `?${queryParams.toString()}` : '';

  history.replaceState(null, '', `${pathname}${newSearch}${hash}`);

}

openModalBtn.addEventListener('click', () => {

  modal.classList.add('show');

  // pushState

  const { pathname, search, hash } = location;

  const params = new URLSearchParams(search);

  params.set('whatsAppDialog', 'open');

  history.pushState(null, '', `${pathname}?${params.toString()}${hash}`);

  // listen to 'back button'

  window.addEventListener(

    'popstate',

    () => {

      modal.classList.remove('show');

    },

    { once: true }

  );

});

closeModalBtn.addEventListener('click', () => {

  history.back(); // back

});

另外, 未来或许可以用 Navigation API 实现, 可能会更方便. 以后才研究. 毕竟现在许多 browser 还不支持.

其它没有提到的

1. backdrop click, Keyboard Esc 关闭.

2. show 的 animation, backdrop fadein, content scale in

3. z-index 问题. 要确保 z-index 够高最好是把 modal 放到 body 最下方 (Angular Material 就这么做的)

但放出去后要注意 CSS Style 哦. element 结构在外面了就不可以 depend on ancestor 了.