还记得之前的javascript入门里的讲的confirm 消息对话框吗？不记得也没关系，我们先来回顾一下，然后在详细讲它。

复习：

confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

语法:

confirm(str);

参数说明:

str：在消息对话框中要显示的文本
返回值: Boolean值

返回值:

当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false

注: 通过返回值可以判断用户点击了什么按钮

看下面的代码:

<script type="text/javascript">

    var mymessage=confirm("你喜欢JavaScript吗?");

    if(mymessage==true)

    {   document.write("很好,加油!");   }

    else

    {  document.write("JS功能强大，要学习噢!");   }

</script>

结果:

注: 消息对话框是排它的，即用户在点击对话框按钮前，不能进行任何其它操作。

任务

使用confirm()提示框，当点击按钮时，完成性别确认。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>confirm</title>

  <script type="text/javascript">

  function rec(){

    var mymessage=confirm("你是女士!");

    if(mymessage==true)

    {

        document.write("你是女士!");

    }

    else

    {

        document.write("你是男士!");

    }

  }

  </script>

</head>

<body>

    <input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />

</body>

</html>

结果：

延伸：

一.之前有说过，功能的话最好用函数来写，那样的话每一个函数都是一个功能，以后有用到这些功能的话，就可以直接用了。即复用。所以要习惯这样哦。。。。。。

就像上面那个例子

<script language="JavaScript">

function confirm (){

    var msg=confirm("你是女士!");

    if(msg==true)

    {

        document.write("你是女士!");

    }

    else

    {

        document.write("你是男士!");

    }

  }   

  </script>
然后给input调用函数，加个onClick="confirm ()"

注意：之前在博问里问过onclick="return confirm()"，onclick="confirm()"有什么不同，几个热心的网友回复了我，现在我总结一下：

confirm是有返回值的。然后onclick函数需要一个返回值，如果不是return confirm()，那么onclick接受到返回值就是undefined，那么表单本身的默认函数就会被触发。

如：
<form action="http://www.baidu.com">

    <button type="submit" onclick="confirm();">提交</button>

</form>

<form action="http://www.baidu.com">

    <button type="submit" onclick="return confirm();">提交</button>

</form> 

return false，会产生event.preventDefault()的效果，加上的话就不会出现表单点取消也被提交的情况了。

二.我们来对javascript window.confirm的方法做个小结

第一种：



就是上面我们提到的那种方法




<script language="JavaScript"> 

function confirm (){

    var msg=confirm("你是女士!");

    if(msg==true)

    {

        document.write("你是女士!");

    }

    else

    {

        document.write("你是男士!");

    }

  }   

  </script>






<input name="button" type="button" onClick="return confirm()" value="点击我，弹出确认对话框" />




注意：input ,buttton,form的的onclick()事件的方法前面需要加一个return ，想这样一样：onClick="return confirm ()"，以避免产生点击取消表单依然被提交的情况。


为了确保点击取消后，不做操作，最好给取消操作返回个false结果。


即：




<script language="JavaScript">

function confirm (){

    var msg=confirm("确定删除!");

    if(msg==true)

    {

        document.write("删除成功!");

    }

    else

{

        return false;

           }

  }

  </script>






<input name="button" type="button" onClick="return confirm ()" value="删除" />




第二种：


在标签中写：


1.




 <a href="javascript:if(confirm('确实要删除该内容吗?')) location='#'">删除</a>




2 .




 <a href="#" onclick= "if(confirm( '确实要删除该内容吗?')==false)return false; ">点击确定</a>




想简单点调用的话 也可以这样


代码如下:






<a href="#" onclick= "return confirm('确实要删除该内容吗?');">删除</a>




第三种：




<script language="JavaScript">

function del_confirm(e)

{

if (event.srcElement.outerText == "删除")

{

event.returnValue = confirm("删除是不可恢复的，你确认要删除吗？");

}

}

document.onclick = delete_confirm;

</script>






<a href="#" onClick="del_confirm">删除</a>




第四种：




<script language="JavaScript">

function del_confirm()

{

event.returnValue = confirm("删除是不可恢复的，你确认要删除吗？");

}

</script>






<a href="http://www.baidu.com" onClick="del_confirm()">删除</a>




二.如何将confirm 确定 取消 按钮替换成 是 否


1.confirm重写
2.用了vbscript来改写，暂时还没接触到vbscript，所以先放到一边，等以后有时间学习了回头看他。想知道如何实现的话就先参考下javascript JS 中confirm 确定 取消 按钮替换成 是 否 取消


三.js confirm换行详解


(1)




confirm('你好 \n world \n !');




(2)




confirm("你好\u000d world ") 




(3)




confirm("你好\r world ")




四.用jquery ui 实现类似cofirm功能


因为还没有接触到，所以先放到一边，等js学完了以后在回头看他。想知道如何实现的话就先参考一下这篇文章JQuery ui 实现类似于confirm的功能


注意：本文为原创，转载请以链接形式标明本文地址 ，谢谢合作。


本文地址：http://www.cnblogs.com/wanghuih/p/5592991.html




												


											
confirm确认对话框的更多相关文章
	

    
						
  1. jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]
		
    jquery仿alert提示框.confirm确认对话框.prompt带输入的提示框插件实例演示 第一步:引入所需要的jquery插件文件: http://www.angelweb.cn/Inc/eg ...
    
		
    2. 
						
  2. 关于abp中使用的sweetalert对话框组件的confirm确认对话框中的一个坑
		
    今天修改了一个功能,限制删除用户,在删除的时候不满足条件的时候提示用户原因,使用的sweet alert组件. abp框架前端集成了sweet alert 对http请求的error做了全局处理,我在 ...
    
		
    3. 
								
  3. Unity3d UGUI 通用Confirm确认对话框实现（Inventory Pro学习总结）
		
    背景 曾几何时,在Winform中,使用MessageBox对话框是如此happy,后来还有人封装了可以选择各种图标和带隐藏详情的MessageBox,现在Unity3d UGui就没有了这样的好事情 ...
    
		
    4. 
						
  4. asp.net在后台弹出confirm确认对话框并获取用户选择的值做出相应的操作
		
    在asp项目中,这种情况是经常出现的,前段时间通过查找资料以及自己尝试,找到一种解决方案,但是不知是否有更好的方案,以后发现再进行记录. 一.思路 在本次项目中,在一个函数中需要让用户判断,并根据用户 ...
    
		
    5. 
						
  5. BootstrapDialog.confirm确认对话框
		
    1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...
    
		
    6. 
						
  6. 确认(confirm 消息对话框)
		
    confirm 消息对话框通常用于允许用户做选择的动作(包括一个确定按钮和一个取消按钮). 语法: confirm(str) str:在消息对话框中要显示的文本 返回值: 当用户点击"确定& ...
    
		
    7. 
						
  7. javascript window.confirm确认 取消对话框实现代码小结
		
    本文章讲述的三种都是基于了javascript confirm提示确认框的做法了,只是在不同的地方写哦,有需要的同学可参考一下   confirm() 方法 confirm() 方法用于显示一个带有指 ...
    
		
    8. 
						
  8. 确认（confirm 消息对话框）语法：confirm(str); 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)
		
    确认(confirm 消息对话框) confirm 消息对话框通常用于允许用户做选择的动作,如:"你对吗?"等.弹出对话框(包括一个确定按钮和一个取消按钮). 语法: confir ...
    
		
    9. 
						
  9. 实现对gridview删除行时弹出确认对话框的一种简单方法
		
    在VS2008提供的GridView中我们可以直接添加一个CommandField删除列:<asp:CommandField ShowDeleteButton="True"  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. wordpress（二）wordpress环境迁移
			
    迁移wordpress到服务器 本地环境如下 win8.1 appser 服务器环境如下 centos7 lnmp 1.使用phpmyadmin备份本地wordpress站点的数据库 2.备份本地wo ...
    
			
    2. 
						
  2. 切换到android studio环境
			
    下载: android-studio-bundle-135.1740770-windows.exe sysimg_arm-21_r03.zip 设置环境变量: ANDROID_SDK_HOME     ...
    
			
    3. 
						
  3. Java基础之－ExecutorService
			
    翻译javadoc系列文章之:ExecutorService /** * An {@link Executor} that provides methods to manage termination ...
    
			
    4. 
						
  4. Property ClientHeight does not exist 问题解决
			
    delphi的TFrame继承自另一个TFrame时,最好通过File->New->Other...->Delphi Projects->Inheritable Items 的 ...
    
			
    5. 
						
  5. 今天的工作发现了4年前的“bug一枚”
			
    上午的时候山东公司要求下拨资金160万(因目前系统不能支付个人卡),在下拨单保存的时候系统提示余额不足,我马上看内部存款,结果发现人家还有190万呢,然后就看今天的委托付款单还有下拨单,山东都没有,一 ...
    
			
    6. 
						
  6. properties文件简介及其常用Java操作
			
    一.properties文件简介 java中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件,文件的内容是格式是"键=值&q ...
    
			
    7. 
						
  7. [IIS]IIS扫盲(四)
			
    IIS简易安装 义哥门户网   IIS(Internet Information Server,互联网信息服务)是一种Web(网页)服务组件,其中包括Web服务器.FTP服务器.NNTP服务器和SMT ...
    
			
    8. 
						
  8. PNG图片压缩工具
			
    https://tinypng.com/ 效果非常不错. 340k的图能压缩到140k左右. 视觉效果差距不大
    
			
    9. 
						
  9. Ubuntu-tomcat7目录
			
    ubuntu下通过apt-get install tomcat7方式安装的tomcat目录分布如下,做个记录: user@myserver:/var/lib/tomcat7$ ls -lttotal  ...
    
			
    10. 
						
  10. .bashrc文件是干什么的(转)
			
    使用man bash命令查看到的联机帮助文件中的相关解释如下:.bashrc - The individual per-interactive-shell startup file. 这个文件主要保存 ...
    
			
    11.