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 相关文章推荐
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
Javascript如何实现双指控制图片功能
Feb 25 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 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
js module大战
2019/04/19 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
Python中分数的相关使用教程
2015/03/30 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
人事主管岗位职责范本
2013/12/04 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
函授生自我鉴定
2014/03/25 职场文书
庆祝儿童节标语
2014/10/09 职场文书
入党积极分子个人总结
2015/03/02 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
Golang的继承模拟实例
2021/06/30 Golang
Redis中一个String类型引发的惨案
2021/07/25 Redis
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
HTTP中的Content-type详解
2022/01/18 HTML / CSS
Python获取字典中某个key的value
2022/04/13 Python