javascript自带弹出窗口简单介绍

在javascript中有三种常用的自带弹出窗口，一个是alert()弹出警告框，一个是confirm()确认框，还有一个是prompt()提示框，下面就通过实例简单介绍一下三种提示框的用法。

一.alert()警告框:

使用alert()可以弹出一个带有文本的警告框，一般用于警告提示，参数是要弹出的文本内容。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" />
<head>
<title>alert弹出窗口-51前端</title> 
<style type="text/css"> 
ul{
  list-style:none;
}
</style> 
<script type="text/javascript"> 
window.onload=function(){
  var userName=document.getElementById("userName");
  var pw=document.getElementById("pw");
  var sb=document.getElementById("sb");
    
  sb.onclick=function(){
     if(userName.value==""){
        alert("用户名不能为空!");
        return false;
     }
     if(pw.value==""){
       alert("密码不能为空!");
       return false;
    }
  } 
}
</script> 
</head> 
<body> 
<form action="#" method="post">
<ul>
   <li>姓名:<input type="text" id="userName" /></li>
   <li>密码:<input type="password" id="pw" /></li>
   <li><input type="submit" id="sb" value="提交" /><input type="reset" value="重置" /></li>
</ul>
</form>
</body> 
</html>

以上代码，当提交表单的时候可以判断姓名和密码是否为空，如果为空则使用alert()弹出提示框。

二.confirm()确认框:

此确认框带有两个按钮一个是"确认"，一个是"取消"，当点击确认的时候confirm()返回true，点击取消返回false。此函数的参数也是提示语。它一般用于确认是否要执行某个操作，例如批量删除的时候，一般会有次提示。

代码实例:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css"> 
ul{
  list-style:none;
  font-size:12px;
}
ul li{
  width:250px;
  height:25px;
  line-height:25px;
}
span{
  font-size:12px;
}
</style> 
<script type="text/javascript"> 
window.onload=function(){
  var box=document.getElementById("box");
  var ckAll=document.getElementById("ckAll");
  var bt=document.getElementById("bt");
  var text=document.getElementById("text");
  var checkboxs=box.getElementsByTagName("input");
    
  ckAll.onclick=function(){
    if(this.checked){
       for(var i=0;i<checkboxs.length;i++){
         checkboxs[i].checked = true;
       }
       text.innerHTML="取消";
    }
    else{
      for(var i=0;i<checkboxs.length;i++){
        checkboxs[i].checked=false;
      }
      text.innerHTML="全选";
    }
  }
  bt.onclick=function(){
    if(confirm("确定要删除吗")){
      //要执行的代码
    }
  }
}
</script> 
</head> 
<body> 
<ul id="box">
  <li><input type="checkbox">51前端欢迎您</li>
  <li><input type="checkbox">只有努力奋斗才会有美好的未来</li>
  <li><input type="checkbox">高手都是从菜鸟成长而来的</li>
  <li><input type="checkbox">太阳每一天都是新的</li>
  <li><input type="checkbox">把我好今天是最重要的，其他都是虚妄的</li>
</ul>
<input type="checkbox" id="ckAll"/><span id="text">全选</span>
<input type="button" value="删除" id="bt" />
</body> 
</html>

以上代码当点击删除的时候可以使用confirm弹出确认窗口，如果点击确定则confirm()会返回true，执行相应的代码。

三.prompt()提示框:

此提示框可以返回指定的文本，prompt()函数具有两个参数，第一个参数是提示框的标题，第二个参数是要返回的文本，当然可以人为的填写要返回的内容。代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" />
<title>prompt()提示框-51前端</title>
<script type="text/javascript"> 
function mytest() { 
  var webName=prompt("请输入网站名称","提示:例如:51前端") 
  if (webName!=null&&webName!="") { 
    document.write("欢迎光临"+webName) 
  } 
} 
window.onload=function(){
  var bt=document.getElementById("bt");
  bt.onclick=mytest;
}
</script> 
</head> 
<body> 
<input type="button" id="bt" value="点击显示提示框" /> 
</body> 
</html>

代码描述：javascript 弹出窗口简单介绍。javascript自带弹出窗口简单介绍

下载全部收藏

166 221

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册