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 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
js转html实体的方法
Sep 27 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 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 删除数组元素
2009/01/16 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
Python类的动态修改的实例方法
2017/03/24 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Python类反射机制使用实例解析
2019/12/30 Python
python如何实现图片压缩
2020/09/11 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
材料物理专业个人求职信
2013/12/15 职场文书
自荐信的基本格式
2014/02/22 职场文书
理想演讲稿范文
2014/05/21 职场文书
办公用品管理制度
2015/08/04 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
DE1107机评
2022/04/05 无线电
MySQL transaction事务安全示例讲解
2022/06/21 MySQL