当前位置：首页 > JavaScript

js实现窗口弹出

2026-03-16 04:24:09JavaScript

使用 `window.open()` 方法

window.open() 是 JavaScript 中最直接的弹出窗口方法。语法如下：

window.open(url, name, features);

url：要加载的页面地址（可选，留空则打开空白页）。
name：窗口名称（如 _blank 在新标签页打开）。
features：窗口特性字符串（如宽度、高度、工具栏等）。

示例代码：

js实现窗口弹出

// 打开一个宽400px、高300px的新窗口
const popup = window.open(
  'https://example.com', 
  'PopupWindow', 
  'width=400,height=300,resizable=yes'
);

使用 `alert()`、`confirm()` 和 `prompt()`

这三种方法属于浏览器内置的模态对话框，会阻塞用户操作直到关闭：

alert(message)：显示警告框，仅含确定按钮。
confirm(message)：显示确认框，返回布尔值（确定/取消）。
prompt(message, defaultText)：显示输入框，返回用户输入内容或 null。

示例代码：

js实现窗口弹出

alert('操作成功！'); // 提示信息
const isConfirmed = confirm('确定删除吗？'); // 确认对话框
const userName = prompt('请输入姓名', '匿名'); // 输入对话框

通过 HTML 和 CSS 模拟弹窗

如果需要自定义弹窗样式，可以通过 HTML/CSS 结合 JavaScript 控制显示隐藏：

<div id="customPopup" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; box-shadow:0 0 10px rgba(0,0,0,0.1);">
  <p>这是一个自定义弹窗</p>
  <button onclick="document.getElementById('customPopup').style.display='none'">关闭</button>
</div>
<button onclick="document.getElementById('customPopup').style.display='block'">打开弹窗</button>

使用现代框架（如 React/Vue）

在框架中通常通过状态管理控制弹窗组件：
React 示例：

import { useState } from 'react';
function App() {
  const [showPopup, setShowPopup] = useState(false);
  return (
    <div>
      <button onClick={() => setShowPopup(true)}>打开弹窗</button>
      {showPopup && (
        <div className="popup">
          <p>React 弹窗</p>
          <button onClick={() => setShowPopup(false)}>关闭</button>
        </div>
      )}
    </div>
  );
}