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>

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

相关文章
|
15天前
|
JavaScript 前端开发
JavaScript中比较常见的几种弹窗
JavaScript中比较常见的几种弹窗
17 0
|
3月前
|
JavaScript 前端开发 定位技术
|
3月前
|
JavaScript 前端开发
JavaScript中比较常见的几种弹窗
JavaScript中比较常见的几种弹窗
21 0
|
4月前
|
JavaScript
适配针式打印机EPSON爱普生,在vue项目中用原生js搭配iframe完成唤起打印弹窗
适配针式打印机EPSON爱普生,在vue项目中用原生js搭配iframe完成唤起打印弹窗
|
9月前
|
JavaScript
原生js做无限弹窗(娱乐)
原生js做无限弹窗(娱乐)
43 0
|
10月前
|
JavaScript 前端开发
|
10月前
|
JavaScript 前端开发
|
10月前
|
JavaScript 前端开发
|
11月前
|
JavaScript
js三种弹窗介绍
js三种弹窗介绍
215 0
|
JavaScript 前端开发
js实现一个弹窗div
网上搜索了半天,奈何没一个满意的,最后还得亲自敲一下,哎~
190 0
js实现一个弹窗div