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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
基于postman获取动态数据过程详解
Sep 08 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
PHP使用函数用法详解
2018/09/30 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
详解ECMAScript typeof用法
2018/07/25 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python中的编码知识整理汇总
2016/01/26 Python
Python通过future处理并发问题
2017/10/17 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python绘制随机网络图形示例
2019/11/21 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
医学专业毕业生推荐信
2013/11/14 职场文书
给女儿的表扬信
2014/01/18 职场文书
公益广告语集锦
2014/03/13 职场文书
住房租房协议书
2014/08/20 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL