Maison > Article > interface Web > Explication de base de la fenêtre pop-up js

Explication de base de la fenêtre pop-up js

小云云original: 2018-02-24 14:31:342222parcourir

Nous avons utilisé la méthode alert(), la méthode prompt() et la méthode prompt() dans certains exemples. Elles affichent toutes une boîte de dialogue à l'écran et affichent le contenu entre parenthèses. Cette méthode rend l'interactivité de la page plus intéressante. En fait, nous utilisons souvent ce type de boîte de dialogue lors de la navigation sur des pages Web. Les boîtes de dialogue sont souvent utilisées lorsque les utilisateurs ont une communication bidirectionnelle avec des applications.

Les trois boîtes de dialogue de JavaScript sont obtenues en appelant les trois méthodes alert(), confirm() et prompt() de l'objet window , vous pouvez utiliser ces boîtes de dialogue pour compléter les entrées et sorties js et implémenter le code js qui peut interagir avec les utilisateurs.

Aujourd'hui, l'éditeur présentera brièvement les trois boîtes de dialogue contextuelles dans js. L'éditeur expliquera d'abord ces méthodes en détail séparément, puis comparera ces méthodes. D'accord, commençons notre voyage js `(. *∩_∩*)′...

Premier : la méthode alert()

L'alerte() La méthode est la plus simple à utiliser parmi les trois boîtes de dialogue. Elle peut être utilisée pour afficher les informations textuelles entre crochets alert() dans la boîte de dialogue de manière simple et claire. entre parenthèses. La boîte de dialogue contient un bouton "Confirmer". Une fois que l'utilisateur a fini de lire les informations affichées, il lui suffit de cliquer sur le bouton pour fermer la boîte de dialogue. Regardons un exemple d'utilisation de la méthode alert(). Le code est le suivant :

<.>

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //JavaScript脚本标注
alert("上联：山石岩下古木枯");//在页面上弹出上联
alert("下联：白水泉边少女妙");//在页面上弹出下联
</script>
</head>

73a6ac4ed44ffec12cee46588e518a5e

Exécutez le petit exemple ci-dessus, une boîte de dialogue apparaîtra sur la page et affichera la phrase "Premier ligne : Arbres anciens sous les rochers. "Sec", comme indiqué ci-dessous :

Ensuite, cliquez sur le bouton "Confirmer" puis affichez la deuxième boîte de dialogue et affichez "La fille à côté de la source d'eau vive". est merveilleux !", l'effet est le suivant ;

Une boîte de dialogue apparaît sur la page et affiche la phrase "Shang Lien : Les arbres centenaires sont morts sous les rochers." Après avoir cliqué sur le bouton "Confirmer", la deuxième boîte de dialogue s'affiche et s'affiche. "La fille à côté de la source d'eau vive est magnifique !" Analysons ce petit exemple :

a、在3f1c4e4b6b16bbbd69b2ee476dc4f83a脚本块中两次调用alert()方法；

b、在每个alert()括号内分别添加了一段文本信息，运行出现如下图所示的页面，当使用鼠标单击页面上的“确定”按钮后，出现第二个页面，再点击“确定”按钮后就关闭页面上的对话框。注意：两个对话框是分别显示的，而不是一个覆盖另一个，这是因为js实在执行完第一个alert()并等到用户点击“确认”按钮之后才去执行第二个alert()的。

alert()是js的window对象的一个方法，调用时可以写成window.alert()，也可以写成alert()，功能都是产生一个带确认按钮的对话框，上面显示括号内的信息，

第二种：confirm()方法

confirm()方法与alert()方法的使用十分类似，不同点是在该种对话框上除了包含一个“确认”按钮外，还有一个“取消”按钮，这种对话框称为确认对话框，在调用window对象的confirm()方法以及后面介绍的prompt()方法时也可以不写window。下面来看一个关于confirm()的小例子,代码如下所示：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
confirm("上联：一但重泥拦子路；下联：两岸夫子笑颜回"); //在页面上弹出确认对话框
</script>
</head>
</html>

分析一下这个小例子：

a、在3f1c4e4b6b16bbbd69b2ee476dc4f83a脚本块中添加confirm()方法、

b、在confirm()括号内添加了一段文本信息，运行效果如上图所示，如果用户单击“确认”按钮，则confirm()方法会返回true，如果用户单击“取消”按钮，则confirm()方法会返回false，无论用户选择哪个按钮，都会关闭对话框，而继续执行javascript代码。单击“确认”或“取消”按钮都是关闭对话框，似乎没有什么区别，实际上，无论是单击“确认”或“取消”按钮都会返回一个布尔值，这样就可以再幕后有一些js代码来发挥按钮的作用，请大家看下面的例子，体会使用confirm()返回布尔值的妙处。代码如下：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
var con;
con=confirm("你喜欢玫瑰花么?"); //在页面上弹出对话框
if(con==true)alert("非常喜欢!");
else alert("不喜欢!");
</script>
</head>
</html>

a、在3f1c4e4b6b16bbbd69b2ee476dc4f83a脚本块中声明了一个变量con。我们来分析一下这个小例子：

b、con=confirm()一句将confirm()方法返回的布尔值赋给con。

c、通过if语句来使用con的值，分别执行不同的语句；执行的效果如下：

如果单击页面的确认框上的“确定”按钮后，出现如下图所示的页面：

如果单击“取消”按钮，则出现如下图所示的页面：

第三种： prompt()方法

alert()方法和confirm()方法的使用十分类似，都是仅仅显示已有的信息，但用户不能输入自己的信息，但是prompt()可以做到这点，她不但可以显示信息，而且还提供了一个文本框要求用户使用键盘输入自己的信息，同时她还包含“确认”或“取消”两个按钮，如果用户“确认”按钮，则prompt()方法返回用户在文本框中输入的内容（是字符串类型)或者初始值(如果用户没有输入信息);如果用户单击“取消”按钮，则prompt()方法返回null，我们称这种对话框为提示框，在这三种对话框中，她的交互性最好。

看下面一个小例子：在页面上两次弹出提示对话框，使用户能输入有关信息，代码如下：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
var name,age;
name=prompt("请问你叫什么名字?"); /*在页面上弹出提示对话框，
将用户输入的结果赋给变量name*/
alert(name); //输出用户输入的信息
age=prompt("你今年多大了?","请在这里输入年龄"); /*在页面上再一次弹出提示对话框，
讲用户输入的信息赋给变量age*/
alert(age)//输出用户输入的信息
</script>
</head>
</html>

Cliquez sur OK, vous aurez une telle surprise :

On clique à nouveau sur le bouton OK :

Cliquez à nouveau sur le bouton OK :

Analysez ce petit exemple

a. Ajoutez deux méthodes prompt() dans le bloc de script 3f1c4e4b6b16bbbd69b2ee476dc4f83a

b. Une information textuelle est ajoutée dans la première parenthèse prompt().

c, name=prompt() attribue les informations saisies par l'utilisateur dans la zone de texte au nom de la variable.

La différence et le lien entre alert(), confirm() et prompt() :

Alerte de boîte d'alerte ( )

l'alerte est une boîte d'avertissement avec un seul bouton "OK" et aucune valeur de retour. Les boîtes d'alerte sont souvent utilisées pour garantir que les utilisateurs peuvent obtenir certaines informations. Lorsque la boîte d'avertissement apparaît, l'utilisateur doit cliquer sur le bouton OK pour continuer l'opération. Syntaxe : alert("texte").

Confirm box confirm()

confirm est une boîte de confirmation avec deux boutons, confirmer ou annuler, et renvoyer vrai ou faux. Les boîtes de confirmation sont utilisées pour permettre aux utilisateurs de vérifier ou d'accepter certaines informations. Lorsque la boîte de confirmation apparaît, l'utilisateur doit cliquer sur le bouton OK ou Annuler pour continuer l'opération. Si l'utilisateur clique sur confirmer, la valeur de retour est vraie. Si l'utilisateur clique sur Annuler, la valeur de retour est fausse. Syntaxe : confirm("text")

Boîte d'invite prompt()

l'invite est une boîte d'invite qui renvoie le message saisi ou sa boîte d'invite de valeur par défaut Souvent utilisé pour inviter l'utilisateur à saisir une certaine valeur avant d'accéder à la page. Lorsque la boîte de dialogue apparaît, l'utilisateur doit saisir une certaine valeur, puis cliquer sur le bouton de confirmation ou d'annulation pour continuer l'opération. Si l'utilisateur clique sur Confirmer, la valeur de retour est la valeur saisie. Si l'utilisateur clique sur Annuler, la valeur de retour est nulle. Syntaxe : prompt("text","default value")

Cet article présente principalement trois boîtes de dialogue contextuelles en javascript, à savoir la méthode alert(), la méthode confirm(), les méthodes prompt() , l'éditeur présente d'abord ces méthodes en détail, puis compare ces méthodes. En plus de ces trois boîtes de dialogue contextuelles, nous pouvons également utiliser document.write() pour écrire directement le message affiché sur la page, BS learning, pour. à suivre... En même temps, merci à tous pour votre soutien continu au site Script House !

Recommandations associées :

Thinkphp5 combiné avec le partage de code de page de personnalisation de la fenêtre contextuelle de couche

Fenêtre contextuelle pilotée par les événements VUE2 exemple d'implémentation

Comment créer un effet pop-up avec jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Plusieurs plug-ins js pratiques pour la navigation en ligne des fichiers PDFArticle suivant：Plusieurs plug-ins js pratiques pour la navigation en ligne des fichiers PDF

Articles Liés

Voir plus