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 相关文章推荐
jquery 删除cookie失效的解决方法
Nov 12 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 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学习教程之第1天
2008/06/15 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
Python网页解析器使用实例详解
2020/05/30 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
python之随机数函数的实现示例
2020/12/30 Python
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
开发房地产协议书
2014/09/14 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python