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 相关文章推荐
JS面向对象编程之对象使用分析
Aug 19 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
实测jquery data()如何存值
Aug 18 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
详解angular应用容器化部署
Aug 14 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
python代码xml转txt实例
2020/03/10 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
亚马逊印度站:Amazon.in
2017/10/15 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
法律专业学生的自我评价
2014/02/07 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
作风建设剖析材料
2014/10/06 职场文书
初婚初育证明范本
2014/11/24 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android