【JS】几种常用的弹窗

7275569-6128427183c772e0.jpg
微信订阅号:Rabbit_svip

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

  • alert()
  • confirm()
  • prompt()





最最最常用的是 alert()

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

alert( 内容 );

内容可以是变量,可以是字符串。
字符串需要用单引号或者双引号括起来。

alert('Rabbit');
7275569-79c9c654e44f958d.gif
微信订阅号:Rabbit_svip



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

alert('<div>Rabbit</div>');
7275569-c5051d3d123e716b.png
微信订阅号:Rabbit_svip




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

alert('Hello\nRabbit');
7275569-0ad43bd9e1757524.png
微信订阅号:Rabbit_svip



alert 无法直接展示 object。





confirm( 内容 )

confirm 对比 alert,会多出一个“取消”按钮。
而且 confirm 有一个回调值。

var callBackValue = confirm('你确定提交吗?');
console.log(callBackValue);
7275569-8769a4be15ef2081.gif
微信订阅号:Rabbit_svip

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

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





prompt( 内容 );

prompt 的比 confirm 多一个输入框。
同样,prompt 也是有返回值的。

var callBackValue = prompt('请输入您的名字');
console.log(callBackValue);
7275569-5cb446170be99b8d.gif
微信订阅号:Rabbit_svip

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

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

猜你喜欢

转载自blog.csdn.net/weixin_34104341/article/details/87134759