全屏弹窗、F11模式及收藏工具栏：JS弹出窗口代码深度解析
184 浏览量
更新于2024-09-02
收藏 109KB PDF 举报
本文档详细介绍了在JavaScript中创建各种弹出窗口的方法，适合那些想要了解如何在网页中实现不同形式窗口弹出的开发者。以下是一些关键知识点：
1. **全屏弹出窗口**:
通过使用`<html>`和`<body>`标签配合特定属性，如`fullscreen`，可以实现全屏弹出窗口。示例代码显示了如何在点击某个元素时，打开一个覆盖整个屏幕的窗口，并将URL指向`www.jb51.net`。
2. **F11模式窗口**:
这种弹出窗口模仿浏览器F11全屏模式，同样利用`<html>`和`<body>`标签，通过`channelmode`属性来实现。这表明你可以通过JavaScript控制页面元素，使其以类似F11模式的方式打开。
3. **带收藏链接工具栏的窗口**:
在这个例子中，通过指定`directories`参数，可以创建一个带有收藏功能的窗口。代码显示了一个宽度为400px、高度为300px的窗口，URL指向`www.wangye8.com`。
4. **网页对话框**:
JavaScript提供了`showModalDialog()`和`showModelessDialog()`函数，用于显示模态对话框和非模态对话框。它们接受URL、窗口大小和位置参数，如`dialogWidth`、`dialogHeight`等，还支持自定义窗口样式选项，如中心对齐、可调整大小、显示状态栏等。这两个函数的区别在于，模态对话框会阻止用户与网页交互，直到关闭对话框，而非模态对话框则允许用户继续浏览网页背景。
这些代码展示了JavaScript在创建动态窗口方面的灵活性，可以帮助开发者根据需求设计各种交互体验。掌握这些技术后，你可以在开发过程中轻松实现网页中的弹出窗口，提升用户体验。无论是在展示信息、引导用户操作还是进行交互式设计，这些都是不可或缺的技巧。
JS弹出窗口代码大全弹出窗口代码大全(详细整理详细整理)
如何利用网页弹出各种形式的窗口，我想大家大多都是知道些的，但那种多种多样的弹出式窗口是怎么搞出来
的，平时利用业余时间整理了一些，需要的朋友可以参考一下
如何利用网页弹出各种形式的窗口，我想大家大多都是知道些的，但那种多种多样的弹出式窗口是怎么搞出来的，我们今天就
来学习一下：
1.弹启一个全屏窗口弹启一个全屏窗口
复制代码 代码如下:
<html>
<body //www.jb51.net','我们','fullscreen');">;
www.jb51.net
</body>
</html>
2.弹启一个被弹启一个被F11化后的窗口化后的窗口
复制代码 代码如下:
<html>
<body '//www.jb51.net','我们','channelmode');">;
www.jb51.net
</body>
</html>
3.弹启一个带有收藏链接工具栏的窗口弹启一个带有收藏链接工具栏的窗口
复制代码 代码如下:
<html>
<body www.wangye8.com','我们','width=400,height=300,directories');">
www.wangye8.com
</body>
</html>
4.网页对话框网页对话框
复制代码 代码如下:
<html>
<SCRIPT LANGUAGE="javascript">
<!--
showModalDialog('//www.jb51.net,'我们','dialogWidth:400px;dialogHeight:300px;
dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</SCRIPT>
www.wangye8.com
</body>
</html>
<html>
<SCRIPT LANGUAGE="javascript">
<!--
showModelessDialog('//www.jb51.net,'我们','dialogWidth:400px;dialogHeight:300px;
dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')
//-->
</SCRIPT>
http://www.wangye8.com
</body>
</html>
showModalDialog()或是showModelessDialog() 来调用网页对话框，至于showModalDialog()与showModelessDialog()的区
别，在于showModalDialog()打开的窗口（简称模式窗口），置在父窗口上，必须关闭才能访问父窗口(建议尽量少用，以免招
人反感)；showModelessDialog()
dialogHeight: iHeight 设置对话框窗口的高度。
dialogWidth: iWidth 设置对话框窗口的宽度。
dialogLeft: iXPos 设置对话框窗口相对于桌面左上角的left位置。
dialogTop: iYPos 设置对话框窗口相对于桌面左上角的top位置。
center: {yes | no | 1 | 0 } 指定是否将对话框在桌面上居中，默认值是“yes”。
help: {yes | no | 1 | 0 } 指定对话框窗口中是否显示上下文敏感的帮助图标。默认值是“yes”。
下载后可阅读完整内容，剩余7页未读，立即下载
2022-01-22 上传
点击了解资源详情
2011-10-09 上传
2020-10-26 上传
2009-10-05 上传
2021-04-29 上传
weixin_38689191
- 粉丝: 5
- 资源: 956
我的内容管理
展开
最新资源
- 黑板风格计算机毕业答辩PPT模板下载
- CodeSandbox实现ListView快速创建指南
- Node.js脚本实现WXR文件到Postgres数据库帖子导入
- 清新简约创意三角毕业论文答辩PPT模板
- DISCORD-JS-CRUD：提升 Discord 机器人开发体验
- Node.js v4.3.2版本Linux ARM64平台运行时环境发布
- SQLight：C++11编写的轻量级MySQL客户端
- 计算机专业毕业论文答辩PPT模板
- Wireshark网络抓包工具的使用与数据包解析
- Wild Match Map: JavaScript中实现通配符映射与事件绑定
- 毕业答辩利器：蝶恋花毕业设计PPT模板
- Node.js深度解析：高性能Web服务器与实时应用构建
- 掌握深度图技术：游戏开发中的绚丽应用案例
- Dart语言的HTTP扩展包功能详解
- MoonMaker: 投资组合加固神器，助力$GME投资者登月
- 计算机毕业设计答辩PPT模板下载
