javascript实现确定和取消提示框效果


Posted in Javascript onJuly 10, 2015

在很多网页都有这样的效果,当点击一个按钮或者其他的对象会弹出一个提示框,如果点击确定则继续执行既定的程序,如果点击取消则会取消继续执行,代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>确定和取消提示框</title>
<style type="text/css">
div
{
 width:150px;
 margin:0px auto;
}
a
{
 font-size:12px;
 color:blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var mylink=document.getElementById("mytest");
 mylink.onclick=function(){
  if(confirm("确定要访问吗"))
  {
    return true;
  }
  else
  {
    return false;
  }
 }
}
</script>
</head>
<body>
 <div><a href="/" id="mytest">点击跳转</a></div>
</body>
</html>

以上代码中,当点击链接会弹出一个提示框,如果点击确定则会访问蚂蚁部落首页,否则不会访问。实现此功能核心是使用了confirm(),参数值是提示框的文本内容。下面就简短介绍一下以上代码的原理:

一.当点击链接的时候,会调用为a元素绑定的onclick事件处理函数。

二.在事件处理函数中,由于当点击确定按钮,confirm()会返回true,点击取消则会返回false,那么if语句则会根据confirm()的返回值选择执行if语句还是else语句。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
js实现一键复制功能
Mar 16 Javascript
vue-hook-form使用详解
Apr 07 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
javascript实现的简单的表单验证
Jul 10 #Javascript
jQuery原生的动画效果
Jul 10 #Javascript
简述Jquery与DOM对象
Jul 10 #Javascript
JavaScript声明变量名的语法规则
Jul 10 #Javascript
JS控制表单提交的方法
Jul 09 #Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 #Javascript
JavaScript的类型、值和变量小结
Jul 09 #Javascript
You might like
PHP传参之传值与传址的区别
2015/04/24 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
wxPython 入门教程
2008/10/07 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
python数据结构之链表详解
2017/09/12 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
简单了解python中的与或非运算
2019/09/18 Python
python时间日期操作方法实例小结
2020/02/06 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
绝对经典成功的大学生推荐信
2013/11/08 职场文书
校企合作协议书
2014/04/16 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
法院授权委托书格式
2014/09/28 职场文书
会计实训报告范文
2014/11/04 职场文书
小学生手册家长意见
2015/06/03 职场文书
银行服务理念口号
2015/12/25 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python