window.open() 打开的是独立浏览器窗口或标签页，非页面内浮动弹窗；真正可控制位置、层级与动画的浮动效果需用 div+CSS+JS 实现模态框，核心是 position:fixed、z-index 和 display:none/block 控制显隐。
用 window.open() 打开新窗口时为什么没浮动效果？
直接调用 window.open() 默认打开的是普通浏览器标签页或窗口，不是“浮动”在当前页面上的弹窗。所谓“浮动窗口”，实际是网页内部用 div + CSS 定位 + JavaScript 控制显隐实现的模态框（modal），和浏览器原生弹窗无关。
常见误区是以为 window.open() 的 width/height 参数能做出悬浮感——它只能控制新窗口尺寸，且现代浏览器普遍拦截、强制转为标签页，完全不可靠。
- 真正可控制位置、层级、动画、关闭逻辑的，只有页面内 DOM 元素
- 必须配合
position: fixed或absolute+z-index - 用户点击遮罩层或关闭按钮时，应仅隐藏元素，而非销毁或跳转
最简可用的浮动弹窗 HTML + CSS + JS 结构
不依赖任何框架，50 行内搞定基础功能。核心是三层结构：遮罩层（overlay）、弹窗容器（modal）、内容区（modal-content）。
<!-- 触发按钮 -->
<button id="openModal">打开浮动窗口</button>
<p><!-- 浮动弹窗结构（初始隐藏）-->
<div id="overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000;">
<div id="modal" style="position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:400px; background:#fff; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:1001;">
<div style="padding:20px;">
<h3>这是浮动窗口</h3>
<p>支持任意 HTML 内容</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<button id="closeModal">关闭</button>
</div>
</div>
</div></p><p><script>
document.getElementById('openModal').onclick = () => {
document.getElementById('overlay').style.display = 'block';
};
document.getElementById('closeModal').onclick = () => {
document.getElementById('overlay').style.display = 'none';
};
// 点击遮罩层关闭
document.getElementById('overlay').onclick = (e) => {
if (e.target === document.getElementById('overlay')) {
document.getElementById('overlay').style.display = 'none';
}
};
</script>注意：transform: translate(-50%, -50%) 是居中关键；z-index 必须比页面其他元素高；遮罩层点击事件要判断是否点在自身上，避免点到弹窗内部误关。
为什么用 display: none/block 而不用 visibility 或 opacity？
visibility: hidden 仍占文档流位置，opacity: 0 虽透明但可点击、可聚焦，都会导致交互异常。而 display: none 彻底移出渲染树，安全可靠。
- 如果需要淡入动画，应在
display: block后加opacity过渡，不能只靠 opacity 控制显隐 - 移动端需额外加
touch-action: none到遮罩层，防止 iOS 滑动穿透 - 键盘用户按
Esc关闭是基本可访问性要求，需监听keydown事件
IE8 及以下兼容时的致命坑
IE8 不支持 transform，top:50%; left:50% + margin 负值模拟居中会因盒模型差异错位。若必须支持，得用 JS 动态计算偏移：
function centerModal() {
var modal = document.getElementById('modal');
var w = modal.offsetWidth;
var h = modal.offsetHeight;
modal.style.marginLeft = (-w/2) + 'px';
modal.style.marginTop = (-h/2) + 'px';
}
// 调用时机：显示后 + resize 时更现实的做法是明确放弃 IE8 —— 它连 rgba() 都不支持，遮罩层灰度效果直接失效。现在绝大多数项目已无需考虑。
真正容易被忽略的是焦点管理：弹窗打开后，焦点没自动移到弹窗内，键盘用户无法操作；关闭后焦点没回到触发按钮，破坏导航连续性。这点比样式更影响实际使用。
