绝对定位元素fit-content居中布局最佳实践实例页面

展示

点击我出现弹框

代码

• HTML：

  <button id="button">点击我出现弹框</button>
  
  <div id="dialog" class="cw-dialog">
      <img src="/images/common/1.jpg" width="300" height="225">
  </div>

• CSS：

  /* 兼容到IE9+ */
  .cw-dialog {
      position: absolute;
      left: 50%; top: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      border: solid;
      z-index: 19;
  }
  .cw-dialog:not([open]) {
      display: none;
  }
  /* fit-content渐进增强实现 */
  @supports (height: fit-content) {
      .cw-dialog  {
          width: fit-content;
          height: fit-content;
          left: 0; top: 1em; right: 0; bottom: 1em;
          margin: auto;
          /* 小动画 */
          animation: tinyUp .2s both;
      }
  }
  @keyframes tinyUp {
      from { transform: translateY(5px); }
      to   { transform: translateY(0); }
  }

• JavaScript：

  document.addEventListener('click', function (event) {
      if (event.target && event.target.id == 'button') {
          dialog.setAttribute('open', '');
      } else {
          dialog.removeAttribute('open');
      }
  });