为何prompt()会导致屏幕退出全屏？如何避免该问题？

浏览器原生的prompt()、alert()这类模态对话框会强制中断全屏上下文，触发页面退出全屏——这是浏览器的交互规范，没法直接让原生prompt绕过这个限制。你可以用以下替代方案：

自定义模拟prompt弹窗 #

自己用HTML/CSS/JS实现一个弹窗组件，完全在页面内渲染，不会触发全屏退出。示例代码如下：

HTML结构 #

<!-- 自定义弹窗容器 -->
<div id="customPrompt" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:20px; background:#fff; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.3); z-index:9999;">
  <p>请输入内容：</p>
  <input type="text" id="promptInput" style="width:100%; padding:8px; box-sizing:border-box;">
  <div style="margin-top:15px; display:flex; gap:10px; justify-content:flex-end;">
    <button id="confirmBtn" style="padding:8px 16px; cursor:pointer;">确认</button>
    <button id="cancelBtn" style="padding:8px 16px; cursor:pointer;">取消</button>
  </div>
</div>
<!-- 遮罩层，模拟模态效果 -->
<div id="promptOverlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;"></div>

JS逻辑 #

// 封装自定义prompt函数
function customPrompt(message, onComplete) {
  const promptEl = document.getElementById('customPrompt');
  const overlayEl = document.getElementById('promptOverlay');
  const inputEl = document.getElementById('promptInput');
  const confirmBtn = document.getElementById('confirmBtn');
  const cancelBtn = document.getElementById('cancelBtn');

  // 更新提示文本
  promptEl.querySelector('p').textContent = message;
  // 清空输入框
  inputEl.value = '';
  // 显示弹窗和遮罩
  promptEl.style.display = 'block';
  overlayEl.style.display = 'block';

  // 绑定事件（用完要移除，避免重复绑定）
  function handleConfirm() {
    onComplete(inputEl.value);
    closePrompt();
  }

  function handleCancel() {
    onComplete(null);
    closePrompt();
  }

  function closePrompt() {
    promptEl.style.display = 'none';
    overlayEl.style.display = 'none';
    confirmBtn.removeEventListener('click', handleConfirm);
    cancelBtn.removeEventListener('click', handleCancel);
  }

  confirmBtn.addEventListener('click', handleConfirm);
  cancelBtn.addEventListener('click', handleCancel);
}

// 全屏状态下的使用示例
document.getElementById('fullscreenBtn').addEventListener('click', () => {
  // 先进入全屏
  document.documentElement.requestFullscreen().then(() => {
    // 点击按钮触发自定义弹窗
    document.getElementById('triggerBtn').addEventListener('click', () => {
      customPrompt('请输入你的内容：', (inputVal) => {
        if (inputVal !== null) {
          console.log('用户输入内容：', inputVal);
          // 这里写输入完成后的业务逻辑
        } else {
          console.log('用户取消了输入');
        }
      });
    });
  });
});

优势说明 #

• 完全在页面上下文内运行，不会触发全屏退出；
• 样式可以根据你的页面风格自定义调整；
• 遮罩层可以阻止用户点击页面其他区域，模拟原生prompt的模态交互。

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