js弹出对话框方式小结


Posted in Javascript onNovember 17, 2015

本文实例总结了js弹出对话框方式。分享给大家供大家参考,具体如下:

一般常用的是 alert prompt confirm三种对话框

示例1:

<html>
<head>
<title>Example 简单对话框</title>
</head>
<body>
<script type="text/JavaScript">
<!--
alert("Good Morning!"); 
//alert只接受一个参数,这个参数是一个字符串,alert所做的全部事情是将这个字符串
//原封不动地以一个提示框返回给用户,我们在前面已经多次见到了这种用法
alert("Hello, "+ prompt("What's your name?")+ "!");
//prompt是一个询问框,它产生一个询问输入窗口,同时等待用户输入的结果
//以继续执行下面的程序,当用户输入完成,点击确认后,它会将输入的字符串返回
//如果用户点了取消按钮,那么它会返回null
if(confirm("Are you ok?"))
//confirm是一个确认框,它产生一个Yes|No的确认提示框,如果回答了Yes,它返回true
//如果回答了No,它返回false
alert("Greate! ");
else
alert("Oh, what's wrong?");
-->
</script>
</body>

也可以自己定义新窗口模拟对话框

示例2:

<html>
<head>
<title>Example模拟对话框</title>
</head>
<body>
<button onclick="opennew()">打开</button>
<script type="text/JavaScript">
<!--
function opennew(){
//doucment.createElement可以用来构造新的DOM对象
var w=document.createElement("div");
//下面一组style属性控制了模拟窗口的样式
//DOM提供的style属性可以很方便地让JavaScript控制元素的展现方式
w.style.top=50;
w.style.left=50;
w.style.height=100;
w.style.width=300;
w.style.position="absolute";
w.style.background="#00ffff";
w.style.paddingTop = 10;
//通过appendChild()方法将创建的div元素对象添加到body的内容中去
w.innerHTML+=("<center>I D :<input><br>密码:<input><br></center>");
document.body.appendChild(w);
}
-->
</script>
</body>
</html>

另外,js基于confirm的确认 取消对话框也非常常见,总结如下:

一种:

<a href="javascript:if(confirm('确实要删除该内容吗?'))location='http://www.google.com'">弹出窗口</a>

二种:

<script language="JavaScript">
function delete_confirm(e) 
{
  if (event.srcElement.outerText == "删除") 
  {
    event.returnValue = confirm("删除是不可恢复的,你确认要删除吗?");
  }
}
document.onclick = delete_confirm;
</script>
<a href="Delete.aspx" onClick="delete_confirm">删除</a>

三种:

if(window.confirm('你确定要取消交易吗?')){
 //alert("确定");
 return true;
}else{
 //alert("取消");
 return false;
}

四种:

<script language="JavaScript">
function delete_confirm() <!--调用方法-->
{
  event.returnValue = confirm("删除是不可恢复的,你确认要删除吗?");
}
</script>

附:js 弹出对话框3种方式完整实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三种弹出对话框的用法实例</title>
<script language="javascript">
function ale()
{
  //这个基本没有什么说的,就是弹出一个提醒的对话框
  alert("我敢保证,你现在用的是演示一");
}
function firm()
{
  //利用对话框返回的值 (true 或者 false)
  if(confirm("你确信要转去风亦飞的博客?"))
  {
    //如果是true ,那么就把页面转向thcjp.cnblogs.com
    location.href="https://3water.com/";
   }
  else
  {
   //否则说明下了,赫赫
   alert("你按了取消,那就是返回false");
  }
}
function prom()
{
  var name=prompt("请输入您的名字","");//将输入的内容赋给变量 name ,
  //这里需要注意的是,prompt有两个参数,前面是提示的话,后面是当对话框出来后,在对话框里的默认值
  if(name)//如果返回的有内容
  {
     alert("欢迎您:"+ name)
   }
}
</script>
</head>
<body>
<p>对话框有三种</p>
<p>1:只是提醒,不能对脚本产生任何改变;</p>
<p>2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 ifelse判断 </p>
<p>3:一个带输入的对话框,可以返回用户填入的字符串,常见于某些留言本或者论坛输入内容那里的 插入UBB格式图片 </p>
<p>下面我们分别演示:</p>
<p>演示一:提醒 对话框</p>
<p>
 <input type="submit" name="Submit" value="提交" onclick="ale()" />
</p>
<p>演示二 :确认对话框 </p>
<p>
 <input type="submit" name="Submit2" value="提交" onclick="firm()" />
</p>
<p>演示三 :要求用户输入,然后给个结果</p>
<p>
 <input type="submit" name="Submit3" value="提交" onclick="prom()" />
</p>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
vue.js实现双击放大预览功能
Jun 23 Javascript
vue使用video插件vue-video-player的示例
Oct 03 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 #Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 #Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 #Javascript
跟我学习javascript的undefined与null
Nov 17 #Javascript
跟我学习javascript的arguments对象
Nov 16 #Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 #Javascript
js实现获取div坐标的方法
Nov 16 #Javascript
You might like
DOMXML函数笔记
2006/10/09 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
Python中装饰器的一个妙用
2015/02/08 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
python机器学习之随机森林(七)
2018/03/26 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
python将视频转换为全字符视频
2019/04/26 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
公司任命书模板
2014/06/06 职场文书
五一促销活动总结
2014/07/01 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
团员自我评价范文
2015/03/10 职场文书
2015政治思想表现评语
2015/03/25 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
员工安全责任协议书
2016/03/22 职场文书