JavaScript中比较常见的几种弹窗

简介: JavaScript中比较常见的几种弹窗

一、alert(警告框)

alert ()是一种弹窗,他是直接在满足他的条件的情况下直接他弹出的,但是这个弹出窗的弊端也是多多,alert()弹出窗只有一个确认按钮,所以不适用于需要用户抉择的情况下,我们尽量不用alert()弹窗,应该各位都知道,当代码走到alert的时候他会直接阻止整个程序的运行,如果我们不点确认按钮,后面的内容就不会加载出来


代码演示:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div>alert是阻塞的函数</div>
    <div>这句话在点击确认弹出框的提示文本后才会显示</div>
  </body>
    <script>
    alert("弹出框文本")
  </script>
</html>、

二、confirm(确认框)

 confirm()方法是显示一个含有指定消息和确认和取消按钮的确认框。

如果点击"确定"返回true,否则返回false,这个弹窗可以让客户用来进行一些抉择,比如删除按钮可以来一个confirm(),让客户可以选择是否删除,以防误触


代码演示:

var x; 
var r=confirm("请按下按钮!");
if (r==true){
  x="你按下的是\"确定\"按钮。";
}
else{
  x="你按下的是\"取消\"按钮。";
}
document.write(x)

三、prompt (提示框)

prompt()方法是显示提示用户进行输入的对话框。

这个方法返回的是用户输入的字符串

代码演示:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      //方式一
      prompt("开心吗?"); // 这个显示内容也可以不写,但就没有交互的意义了。
      //方式二
      var x; 
      var name=prompt("请输入你的名字","Keafmd"); //显示默认文本 "Keafmd"
      if (name!=null && name!=""){ 
       x="你好! " + name + "。";
       document.write(x)
      } 
    </script>
    <title></title>
  </head>
  <body>
  </body>
</html>

温馨提示,大家最好还是直接写一个弹窗,也费不了多长时间,还方便使用

相关文章
|
1月前
|
机器学习/深度学习 JavaScript 前端开发
JavaScript 弹窗
JavaScript 弹窗
32 1
|
26天前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
31 1
|
3月前
|
前端开发 JavaScript 开发者
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
本文提供了一个前端JS按钮点击事件、弹出式窗口和遮罩层的实战示例,包括HTML、CSS和JavaScript的具体实现代码,以及功能解析,演示了如何实现按钮点击后触发弹窗显示和遮罩层,并在2秒后自动关闭或点击遮罩层关闭弹窗的效果。
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
|
3月前
|
存储 JavaScript
js如何实现开屏弹窗
js如何实现开屏弹窗
17 0
|
5月前
|
JavaScript 前端开发
JavaScript弹窗事件
JavaScript弹窗事件
44 0
|
6月前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
48 1
|
6月前
|
JavaScript 前端开发
JavaScript 弹窗
JavaScript 弹窗
|
6月前
|
存储 JavaScript
|
6月前
|
缓存 JavaScript
js_单例模式制作无限弹窗(3s内销毁)
js_单例模式制作无限弹窗(3s内销毁)
49 0
|
6月前
|
JavaScript 前端开发
JavaScript中比较常见的几种弹窗
JavaScript中比较常见的几种弹窗
74 0