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 相关文章推荐
window.js 主要包含了页面的一些操作
Dec 23 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
vue实现单选和多选功能
Aug 11 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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 cookie的操作实现代码(登录)
2010/12/29 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
mac系统安装Python3初体验
2018/01/02 Python
使用python实现链表操作
2018/01/26 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
Django之腾讯云短信的实现
2020/06/12 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
学年自我鉴定
2014/01/16 职场文书
八年级数学教学反思
2014/01/31 职场文书
找工作求职信
2014/07/07 职场文书
英文升职感谢信
2015/01/23 职场文书
员工年度工作总结2015
2015/05/18 职场文书
德劲DE1105机评
2022/04/05 无线电
Go语言测试库testify使用学习
2022/07/23 Golang