js弹出对话框方式小结_javascript技巧-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

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程序设计有所帮助。

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Verständnis der JavaScript -Engine: ImplementierungsdetailsApr 17, 2025 am 12:05 AM

Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.

Python vs. JavaScript: Die Lernkurve und BenutzerfreundlichkeitApr 16, 2025 am 12:12 AM

Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.

Python gegen JavaScript: Community, Bibliotheken und RessourcenApr 15, 2025 am 12:16 AM

Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.

Von C/C nach JavaScript: Wie alles funktioniertApr 14, 2025 am 12:05 AM

Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.

JavaScript -Engines: Implementierungen vergleichenApr 13, 2025 am 12:05 AM

Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.

Jenseits des Browsers: JavaScript in der realen WeltApr 12, 2025 am 12:06 AM

Zu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.

Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

Ich habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen

So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Dieser Artikel zeigt die Frontend -Integration mit einem Backend, das durch die Genehmigung gesichert ist und eine funktionale edtech SaaS -Anwendung unter Verwendung von Next.js. erstellt. Die Frontend erfasst Benutzerberechtigungen zur Steuerung der UI-Sichtbarkeit und stellt sicher, dass API-Anfragen die Rollenbasis einhalten

See all articles