【JS】几种常用的弹窗

JavaScript016

【JS】几种常用的弹窗,第1张

原生JS 有3种最常用的弹窗方式

最最最常用的是 alert()

alert 引发的弹窗,只有一个“确定”按钮。

alert( 内容 )

内容可以是变量,可以是字符串。

字符串需要用单引号或者双引号括起来。

需要注意的是,内容如果是 html 标签,是会直接输出字符串的。

如果需要换行,需要用到 html 的转义字符。

alert 无法直接展示 object。

confirm 对比 alert,会多出一个“取消”按钮。

而且 confirm 有一个回调值。

如果点击了“确定”,返回值为:true

如果点击了“取消”,返回值为:false

prompt 的比 confirm 多一个输入框。

同样,prompt 也是有返回值的。

如果按了确定,返回值是 输入的内容,字符串型。

如果按了取消,返回值是:null。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html,输入问题基础代码。

2、在index.html中的<body>标签中,输入js代码:

function fun() {

alert('click success!')

}

3、浏览器运行index.html页面,此时点击按钮弹出了提示框。

弹出窗口的命令格式:“window.open(‘URLStr’,

‘WindowName’,

‘Property’)”,其中:

1.window.open命令用于在网页上弹出一个新窗口。

2.URLStr:弹出窗口所显示的页面

3.WindowName:弹出窗口的名称,可以任意指定,也可以用’’来代替

4.Property:用于控制弹出窗口显示的属性,具体可控制的参数有:

5.Toolbar:是否显示浏览器工具栏,yes为显示,no为不显示

6.locetion:是否显示游览器地址栏,yes为显示,no为不显示

7.Directories:是否显示目录按钮,yes为显示,no为不显示

8.Status:是否显示状态栏,yes为显示,no为不显示

9.Menubar:是否显示菜单条,yes为显示,no为不显示

10.Scrollbar:是否激活水平和垂直流动条,yes为显示,no为不显示

11.Resizable:是否可以改变窗口大小,yes为显示,no为不显示

12.Width:指定窗口的宽度,以像素为单位

13.Height:指定窗口的高度,以像素为单位

14.Left:指定窗口距屏幕左端的距离,以像素为单位

15.Top:指定窗口距屏幕顶端的距离,以像素为单位

16.screenX:等同于Left属性

17.screenY:等同于Top属性