`
songzhan
  • 浏览: 247898 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

js 弹出对话框3种方式

 
阅读更多

对话框有三种

1:只是提醒,不能对脚本产生任何改变;

2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 if...else...判断

3: 一个带输入的对话框,可以返回用户填入的字符串,常见于某些留言本或者论坛输入内容那里的 插入UBB格式图片

下面我们分别演示:

Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5. <head>  
  6.   
  7. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  8.   
  9. <title>三种弹出对话框的用法实例</title>  
  10.   
  11. <script language="javascript">  
  12.   
  13. function ale()  
  14.   
  15. {  
  16.   
  17.         //这个基本没有什么说的,就是弹出一个提醒的对话框  
  18.   
  19.     alert("我敢保证,你现在用的是演示一");  
  20.   
  21. }  
  22.   
  23. function firm()  
  24.   
  25. {  
  26.   
  27.         //利用对话框返回的值 (true 或者 false)  
  28.   
  29.     if(confirm("你确信要转去风亦飞的博客?"))  
  30.   
  31.     {  
  32.   
  33.             //如果是true ,那么就把页面转向thcjp.cnblogs.com  
  34.   
  35.         location.href="http://blog.csdn.net/fengyifei11228/";  
  36.   
  37.      }  
  38.   
  39.     else  
  40.   
  41.     {  
  42.   
  43.         //否则说明下了,赫赫  
  44.   
  45.       alert("你按了取消,那就是返回false");  
  46.   
  47.     }  
  48.   
  49. }  
  50.   
  51. function prom()  
  52.   
  53. {  
  54.   
  55.     var name=prompt("请输入您的名字","");//将输入的内容赋给变量 name ,  
  56.   
  57.     //这里需要注意的是,prompt有两个参数,前面是提示的话,后面是当对话框出来后,在对话框里的默认值  
  58.   
  59.     if(name)//如果返回的有内容  
  60.   
  61.     {  
  62.   
  63.          alert("欢迎您:"+ name)  
  64.   
  65.      }  
  66.   
  67. }  
  68.   
  69. </script>  
  70.   
  71. </head>  
  72.   
  73.   
  74.   
  75. <body>  
  76.   
  77. <p>对话框有三种</p>  
  78.   
  79. <p>1:只是提醒,不能对脚本产生任何改变;</p>  
  80.   
  81. <p>2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 ifelse判断 </p>  
  82.   
  83. <p>3: 一个带输入的对话框,可以返回用户填入的字符串,常见于某些留言本或者论坛输入内容那里的 插入UBB格式图片 </p>  
  84.   
  85. <p>下面我们分别演示:</p>  
  86.   
  87. <p>演示一:提醒 对话框</p>  
  88.   
  89. <p>  
  90.   
  91.   <input type="submit" name="Submit" value="提交" onclick="ale()" />  
  92.   
  93. </p>  
  94.   
  95. <p>演示二 :确认对话框 </p>  
  96.   
  97. <p>  
  98.   
  99.   <input type="submit" name="Submit2" value="提交" onclick="firm()" />  
  100.   
  101. </p>  
  102.   
  103. <p>演示三 :要求用户输入,然后给个结果</p>  
  104.   
  105. <p>  
  106.   
  107.   <input type="submit" name="Submit3" value="提交" onclick="prom()" />  
 
分享到:
评论

相关推荐

    js弹出对话框的3种方式

    //这个基本没有什么说的,就是弹出一个提醒的对话框 alert("我敢保证,你现在用的是演示一"); } function firm() { //利用对话框返回的值 (true 或者 false) if(confirm("你确信要转去 天轰穿的博客?"))

    js弹出对话框 源代码

    在网页设计中,弹出对话框是常见的用户交互方式,可以用来显示警告信息、获取用户输入或进行确认操作。本文将深入探讨如何使用JS创建具有圆角和关闭按钮的对话框,并涵盖五种不同的展示风格。 首先,我们需要了解...

    Javascript弹出对话框

    总的来说,JavaScript弹出对话框是网页交互中的基础工具,正确地使用它们可以增强用户体验,但也要注意其局限性和安全性。随着前端技术的发展,现代Web应用更倾向于使用自定义组件和库来构建更加灵活和安全的对话框...

    WEB弹出对话框

    在Web开发中,弹出对话框是不可或缺的功能之一,它能提供用户交互并接收用户输入。在本案例中,我们关注的是如何在Visual Studio 2005 (VS2005) 中方便地实现这一功能。标题提到的"WEB弹出对话框"指的是在网页上显示...

    asp.net弹出对话框

    在 C# 中,通常我们会利用 JavaScript 或者 jQuery 来实现前端的弹出对话框效果,因为服务器端的 C# 代码并不能直接影响到浏览器中的页面行为。例如,我们可以使用 `window.alert()` 函数来显示简单的警告对话框,...

    使用html+css+js实现自定义弹出对话框/输入框

    在实现弹出对话框时,我们需要创建一个包含对话框元素的容器,例如`&lt;div&gt;`,并设置相应的ID或类名以便于CSS和JavaScript操作。例如: ```html 自定义对话框 请输入内容"&gt; 关闭 ``` 接着,CSS(Cascading ...

    js弹出对话框源代码下载

    标题提到的"js弹出对话框源代码下载",是指使用JavaScript实现的一种常见网页交互功能——弹出对话框。对话框通常用于向用户显示警告、确认信息或获取用户输入。在网页中,我们常见的对话框有alert()、prompt()和...

    js弹出对话框.rar

    本压缩包“js弹出对话框.rar”提供了一个自定义的JavaScript弹出对话框实现,允许开发者根据需求调整样式和参数。 在JavaScript中,内置提供了三种基本的弹出对话框:alert()、prompt()和confirm()。但这些对话框...

    九种js弹出对话框的方法总结

    最基本的JavaScript弹出对话框实现非常简单,仅需几行代码即可完成: ```javascript &lt;script LANGUAGE="javascript"&gt; &lt;!-- window.open("page.html"); //--&gt; ``` 这里的`window.open("page.html");`语句用于...

    漂亮的网页弹出对话框

    "漂亮的网页弹出对话框"是指在网页中实现美观且功能丰富的弹窗效果。这类对话框可以增强用户体验,使网站看起来更加专业和精致。本主题将深入探讨如何创建和实现这样的对话框。 首先,我们要了解弹出对话框的基本...

    JS实现弹出下载对话框及常见文件类型的下载

    标题和描述中提到的关键知识点主要包括如何使用JavaScript实现文件下载,弹出下载对话框以及如何处理常见文件类型的下载。在给定的文件内容中,详细介绍了几个关键步骤和技术细节: 1. 实现文件下载的基本原理和...

    不错的JS弹出对话框插件 artDialog

    `artDialog` 是一个功能强大的JavaScript弹出对话框插件,以其简洁的API和丰富的自定义选项深受前端开发者喜爱。它允许开发者轻松创建各种类型的对话框,如提示、确认、警告以及自定义内容的对话框,同时提供了内置...

    百洋软件研究实验室-js实现弹出对话框

    js弹出对话框 例子 此js弹出对话框已做过测试,可以兼容现在的所有主流浏览器,所以你可以放心使用这个js弹出对话框。 js弹出对话框源代码来自于百洋软件研究实验室懒人萱的博客,更多的博客文章可以到 百洋软件研究...

    asp.net弹出对话框常用技巧

    本文将详细介绍几种常用的在ASP.NET中实现弹出对话框的方法,适合ASP.NET初学者学习。 #### 1. 使用`onclick`事件触发确认框 可以通过为按钮绑定`onclick`事件来弹出一个确认对话框,询问用户是否继续执行删除等...

    js弹出保存对话框

    ### JS弹出保存对话框知识点解析 #### 一、概述 在Web开发中,有时候我们需要让用户选择一个文件夹路径来保存文件,例如在导出数据为CSV或Excel时。JavaScript本身并不支持直接创建文件选择器或者保存对话框,但...

    js 遮罩层弹出对话框 很简单得

    js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得

    WEB通用纯JS弹出对话框V1.1

    【标题】"WEB通用纯JS弹出对话框V1.1"是一个JavaScript实现的Web页面交互功能,旨在提供一种无依赖、跨平台的对话框解决方案。这个版本是V1.0的升级,主要优化了对话框在页面滚动时的位置定位问题,确保用户无论在...

    js中常用的弹出对话框3种方式

    三种弹出对话框的用法实例 对话框有三种 1:只是提醒,不能对脚本产生任何改变; 2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 if else 判断 3:一个带输入的对话框,可以返回用户填入的字符串,...

    javascript弹出对话框总结

    ### JavaScript弹出对话框知识点详解 #### 一、`window.open()` 方法 `window.open()` 是JavaScript中最常见的打开新窗口的方法。此方法接受三个参数: 1. **URL**:要加载到新窗口中的文档的URL地址。 2. **...

Global site tag (gtag.js) - Google Analytics