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 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
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 include_path设置技巧分享
2011/07/03 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
sina的lightbox效果。
2007/01/09 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
由面试题加深对Django的认识理解
2019/07/19 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
MYSQL基础面试题
2012/05/13 面试题
青年文明号服务承诺
2014/03/31 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
店铺转让协议书
2014/12/02 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript