JavaScript对话框弹出方法大全：从基础到高级设置

78 浏览量更新于2024-08-30 收藏 83KB PDF 举报

本文主要介绍了九种JavaScript弹出对话框的方法，重点围绕两种常见的实现方式展开。首先，我们来看**最基本的方法**，即通过`window.open()`函数打开一个新的窗口，代码简洁明了，示例如下： ```javascript <script LANGUAGE="javascript">  </script> ``` 这段代码会创建一个新窗口并加载指定的`page.html`文件。在`<script>`标签中编写JavaScript代码时，需要确保它们被正确包裹在`<script>`和`</script>`标签内，避免在低版本浏览器中显示源代码。为了灵活性，可以在HTML的不同部分放置此代码，但通常推荐将其置于`<head>`或靠近头部，以便尽早执行。 **第二种方法**是增加属性设置，使弹出窗口具有自定义特性。通过添加更多的参数到`window.open()`函数，可以调整窗口的尺寸、位置、工具栏、菜单栏等。例如： ```javascript <script LANGUAGE="javascript">  </script> ``` 参数解释如下： - `height=100`：设置窗口的高度为100像素。 - `width=400`：设置窗口的宽度为400像素。 - `top=0` 和 `left=0`：窗口定位在屏幕左上角，距离屏幕边缘0像素。 - `toolbar=no`：关闭工具栏。 - `menubar=no`：关闭菜单栏。 - `scrollbars=no`：关闭滚动条。 - `resizable=no`：禁止用户调整窗口大小。 - `location=no`：隐藏地址栏。 - `status=no`：隐藏状态栏。这些属性可以根据需求进行调整，以便创建符合项目需求的个性化弹出对话框。总结来说，JavaScript提供了丰富的功能来控制弹出窗口的行为，开发者可以根据项目需求灵活选择和组合不同的方法来实现弹出对话框的功能。

九种九种js弹出对话框的方法总结弹出对话框的方法总结

【1、最基本的js弹出对话框窗口代码】

这是最基本的js弹出对话框，其实代码就几句非常简单：

代码如下:

<!–

window.open (“page.html”)

–>

</script>

因为这是一段javascripts代码，所以它们应该放在<script LANGUAGE=”javascript”>标签和</script>之间。<!– 和–>是对一些

版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。

window.open (“page.html”) 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝

对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。

这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面

代码长的页面，这种js弹出对话框想早点弹出就尽量往前放。

【2、增加属性设置的js弹出对话框代码】

下面再说一说js弹出对话框窗口属性的设置。只要再往上面的代码中加一点东西就可以了。

我们来定制这个js弹出对话框弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

代码如下:

View Code

<!–

window.open(“page.html”, “newwindow”,”height=100, width=400, top=0,left=0,toolbar=no, menubar=no, scrollbars=no,

resizable=no,location=no,status=no”)

//写成一行

–>

</script>

参数解释：

window.open 弹出新窗口的命令；

“page.html” 弹出窗口的文件名；

“newwindow” 弹出窗口的名字（不是文件名），非必须，可用空””代替；

height=100 窗口高度；

width=400 窗口宽度；

top=0 窗口距离屏幕上方的象素值；

left=0 窗口距离屏幕左侧的象素值；

toolbar=no 是否显示工具栏，yes为显示；

menubar，scrollbars 表示菜单栏和滚动栏。

resizable=no 是否允许改变窗口大小，yes为允许；

location=no 是否显示地址栏，yes为允许；

status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

</script> js脚本结束

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38677472

粉丝: 3
资源: 967

JavaScript对话框弹出方法大全：从基础到高级设置

JS实现自动消息弹出框

JS多功能对话框

js弹出框、对话框、提示框、弹窗实现方法总结(推荐)

JavaScript弹出对话框大全：9种方法解析

九种JavaScript对话框弹出方法详解及代码示例

javascript九种自定义弹出层效果

JavaScript教程：窗口对象与对话框方法解析

js+css3实现的鼠标点击九宫格弹出窗口特效源码.zip

jQuery弹出层有9种效果

Javascript常用方法

最新资源