js弹出对话框方式小结_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

js弹出对话框方式小结_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:32 PM

本文实例总结了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&#63;")+ "!");
//prompt是一个询问框，它产生一个询问输入窗口，同时等待用户输入的结果
//以继续执行下面的程序，当用户输入完成，点击确认后，它会将输入的字符串返回
//如果用户点了取消按钮，那么它会返回null
if(confirm("Are you ok&#63;"))
//confirm是一个确认框，它产生一个Yes|No的确认提示框，如果回答了Yes，它返回true
//如果回答了No，它返回false
alert("Greate! ");
else
alert("Oh, what's wrong&#63;");
-->
</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的确认取消对话框也非常常见，总结如下：

一种：

复制代码代码如下:

弹出窗口

二种：

<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.jb51.net/";
   }
  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程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7567

CakePHP 教程

1386

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

106

显示更多

Related knowledge

如何使用JS和百度地图实现地图平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

如何使用PHP和JS创建股票蜡烛图 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

如何使用JS和百度地图实现地图热力图功能 Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

如何使用JS和百度地图实现地图点击事件处理功能 Nov 21, 2023 am 11:11 AM

如何使用JS和百度地图实现地图点击事件处理功能概述：在Web开发中，经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能，并给出具体的代码示例。步骤：导入百度地图的API文件首先，要在HTML文件中导入百度地图API的文件，可以通过以下代码实现：

PHP与JS开发技巧：掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

如何使用JS和百度地图实现地图多边形绘制功能 Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

See all articles

js弹出对话框方式小结_javascript技巧

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题