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分页
Jun 07 Javascript
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 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/07/17 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
JavaScript模拟push
2016/03/06 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
食品安全宣传标语
2014/06/07 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
入团介绍人意见范文
2015/06/04 职场文书
php中pcntl_fork详解
2021/04/01 PHP
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS