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 相关文章推荐
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
jQuery选择器基础入门教程
May 10 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
vue-router实现嵌套路由的讲解
Jan 19 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正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
JavaScript版代码高亮
2006/06/26 Javascript
js文字滚动停顿效果代码
2008/06/28 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
Python深入学习之装饰器
2014/08/31 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
python实现飞行棋游戏
2020/02/05 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
Python 在函数上添加包装器
2020/07/28 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
投资合作协议书范本
2014/04/17 职场文书
课外活动总结范文
2014/07/09 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android