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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
详解Bootstrap插件
Apr 25 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
微信小程序签到功能
Oct 31 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
js prototype深入理解及应用实例分析
Nov 25 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 图片上传代码
2011/09/13 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
php实现求相对时间函数
2015/06/15 PHP
深入理解PHP内核(一)
2015/11/10 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
JS的数组迭代方法
2015/02/05 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
Python中Numpy mat的使用详解
2019/05/24 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
django页面跳转问题及注意事项
2019/07/18 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
Java如何调用外部Exe程序
2015/07/04 面试题
国贸专业自荐信范文
2014/03/02 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
单位政审意见范文
2015/06/04 职场文书
地心历险记观后感
2015/06/15 职场文书