这篇文章主要介绍了 js 弹出对话框方式, 结合大量实例总结分析了 JavaScript 常用的弹出对话框的实现技巧与相关函数的具体使用方法, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例总结了 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 = "http://www.phperz.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 程序设计有所帮助。
来源: