类似antdesign modal效果
https://ant.design/components/modal-cn/

scale1.gif

核心

  1. popup.style.cssText =
  2. `transform-origin: ${leftBtn.getBoundingClientRect().x - window.innerWidth / 2}px ${leftBtn.getBoundingClientRect().y - window.innerHeight / 2}px`;

因为我的弹窗默认在屏幕中间，所以要减去屏幕宽高的一半，如果默认在左上角则不用减了，直接就是鼠标点击位置就行了。

transform-origin

设置transform-origin
第一个参数为
鼠标点击的位置的x轴坐标 - 屏幕宽度 / 2
第二个参数为 1
y轴坐标 - 屏幕高度 / 2

完整demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .popup {
  10.             width: 600px;
  11.             height: 400px;
  12.             position: fixed;
  13.             left: 50%;
  14.             top: 50%;
  15.             transition: all 0.28s;
  16.             transform: scale(0) translate(-50%, -50%);
  17.             background-color: burlywood;
  18.             z-index: 2;
  19.         }
  21.         .popup_show {
  22.             transition: all 0.28s;
  23.             transform: scale(1) translate(-50%, -50%);
  24.         }
  26.         .mask {
  27.             position: fixed;
  28.             top: 0;
  29.             left: 0;
  30.             width: 100%;
  31.             height: 100%;
  32.             background-color: rgba(0, 0, 0, 0.3);
  33.             display: none;
  34.         }
  36.         .mask_show {
  37.             display: block;
  38.         }
  39.     </style>
  40. </head>
  42. <body>
  43.     <div>
  44.         <button style="float: right;" id="left-btn">
  45.             click me
  46.         </button>
  47.         <div id="mask" class="mask"></div>
  48.         <div id="popup" class="popup">
  49.         </div>
  50.     </div>
  51.     <script>
  52.         window.onload = function () {
  53.             const $ = (el) => document.querySelector(el)
  54.             const leftBtn = $("#left-btn")
  55.                 , popup = $("#popup")
  56.                 , mask = $("#mask")
  58.             // 初始化第一次的transform-origin位置
  59.             popup.style.cssText =
  60.                 `transform-origin: ${leftBtn.getBoundingClientRect().x - window.innerWidth / 2}px ${leftBtn.getBoundingClientRect().y - window.innerHeight / 2}px`;
  62.             // 点击按钮出现弹窗
  63.             leftBtn.addEventListener('click', (e) => {
  64.                 popup.style.cssText =
  65.                     `transform-origin: ${e.x - window.innerWidth / 2}px ${e.y - window.innerHeight / 2}px`;
  66.                 popup.classList.add('popup_show')
  67.                 mask.classList.add('mask_show')
  68.             })
  70.             // 点击遮罩关闭弹窗
  71.             mask.addEventListener('click', () => {
  72.                 popup.classList.remove('popup_show')
  73.                 mask.classList.remove('mask_show')
  74.             })
  75.         }
  76.     </script>
  77. </body>
  79. </html>

效果

demo.gif