请用js写一个在浏览器视口内弹窗全屏的代码
时间: 2023-05-25 21:06:02 浏览: 204
由于涉及到DOM操作和视口尺寸计算,需要在浏览器环境下才能运行。以下是一个可能的实现:
```javascript
function popupFullscreen() {
// 创建弹窗根元素
const popup = document.createElement('div');
popup.style.position = 'fixed';
popup.style.top = 0;
popup.style.left = 0;
popup.style.width = '100vw';
popup.style.height = '100vh';
// 创建弹窗内容区域
const content = document.createElement('div');
content.innerText = 'Hello, world! This is a fullscreen popup.';
content.style.position = 'absolute';
content.style.top = '50%';
content.style.left = '50%';
content.style.transform = 'translate(-50%, -50%)';
popup.appendChild(content);
// 插入文档,并设置样式
document.body.appendChild(popup);
document.body.style.overflow = 'hidden';
// 处理滚动和调整窗口大小
const handleScroll = () => {
const { scrollTop, scrollLeft } = document.documentElement;
popup.style.top = `-${scrollTop}px`;
popup.style.left = `-${scrollLeft}px`;
};
const handleResize = () => {
popup.style.width = `${window.innerWidth}px`;
popup.style.height = `${window.innerHeight}px`;
};
window.addEventListener('scroll', handleScroll);
window.addEventListener('resize', handleResize);
// 返回关闭函数
return () => {
document.body.removeChild(popup);
document.body.style.overflow = '';
window.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', handleResize);
};
}
// 使用示例
const closePopup = popupFullscreen();
// 关闭弹窗
closePopup();
```
该函数会创建一个全屏弹窗,并阻止用户滚动和调整窗口大小。弹窗中可以加入任何需要的内容。同时,该函数返回一个关闭弹窗的函数,方便外部调用。注意,该实现中没有对边界情况进行处理,例如弹窗内部大小超过视口大小,或者带有滚动条等情况。在实际应用中,需要根据具体要求进行调整。
阅读全文