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 相关文章推荐
ExtJS 下拉多选框lovcombo
May 19 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
sails框架的学习指南
Dec 22 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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中stream(流)的用法
2014/03/25 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
jcrop基本参数一览
2013/07/16 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
python3实现表白神器
2019/04/09 Python
通过代码实例了解Python sys模块
2020/09/14 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
数控技术专业推荐信
2013/11/01 职场文书
团工委书记自荐书范文
2013/12/17 职场文书
学生自我评价范文
2014/02/02 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
公司酒会致辞
2015/07/30 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
go:垃圾回收GC触发条件详解
2021/04/24 Golang
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python