如何在页面中定位多个HTML5 dialog元素并加载不同iframe？

默认情况下，浏览器会把<dialog>元素居中显示。要让多个dialog分布在屏幕不同位置，直接用CSS修改定位规则就行，不需要复杂的JavaScript。下面是两种实用方法：

方法一：针对单个ID设置固定位置 #

适合dialog数量不多的场景，直接给每个dialog的ID写定位样式：

<html>
<head>
  <style>
    /* 覆盖dialog默认的居中样式 */
    dialog {
      position: fixed;
      margin: 0; /* 去掉默认margin，避免干扰定位 */
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 0; /* 去掉默认内边距，让iframe填满dialog */
    }

    /* 第一个dialog放在左上角 */
    #first {
      top: 20px;
      left: 20px;
    }

    /* 第二个dialog放在右上角 */
    #second {
      top: 20px;
      right: 20px;
    }

    /* 统一设置iframe样式，避免显示异常 */
    iframe {
      width: 600px;
      height: 400px;
      border: none;
    }
  </style>
</head>
<body>
    <dialog open id="first">
        <iframe src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"></iframe>
    </dialog>

    <dialog open id="second">
        <iframe src="https://www.google.com"></iframe>
    </dialog>
</body>
</html>

方法二：用CSS自定义属性（变量）实现灵活定位 #

如果需要添加更多dialog，用自定义属性能减少重复代码，直接在HTML里指定位置：

<html>
<head>
  <style>
    dialog {
      position: fixed;
      margin: 0;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 0;
      /* 定义默认位置变量 */
      --top: 20px;
      --left: 20px;
      top: var(--top);
      left: var(--left);
    }

    iframe {
      width: 600px;
      height: 400px;
      border: none;
    }
  </style>
</head>
<body>
    <!-- 左上角 -->
    <dialog open id="first" style="--top:20px; --left:20px;">
        <iframe src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"></iframe>
    </dialog>

    <!-- 右下角 -->
    <dialog open id="second" style="--top:calc(100% - 440px); --left:calc(100% - 620px);">
        <iframe src="https://www.google.com"></iframe>
    </dialog>
</body>
</html>

补充说明 #

• 用position: fixed可以让dialog相对于视口定位，滚动页面时位置不会变；如果需要相对于父元素定位，换成position: absolute即可。
• 调整top/left/right/bottom的值可以自由控制dialog的位置，也可以用百分比实现响应式布局。
• 给iframe设置border: none是为了去掉默认的边框，让显示更整洁。

内容的提问来源于stack exchange，提问作者jfbaro