Maison > Article > interface Web > Comment implémenter la fenêtre pop-up js dans la page ? (divers exemples de styles)

Comment implémenter la fenêtre pop-up js dans la page ? (divers exemples de styles)

藏色散人original: 2018-08-14 15:56:5115686parcourir

Cet article explique principalement comment utiliser du code js simple pour obtenir divers effets de fenêtres contextuelles sur les pages Web. Comme nous le savons tous, si vous vous inscrivez, fermez, quittez, etc. sur le site Web, une fenêtre d'invite apparaîtra. Cette fonction réduit considérablement les erreurs des utilisateurs et améliore la sécurité des informations des utilisateurs. Alors certains novices peuvent se demander : comment cet effet de jugement est-il obtenu ? En fait, il sera facile à comprendre tant que vous parcourrez les exemples de code contextuel js simples et faciles à comprendre dans cet article.

Ici, je vais vous présenter trois façons de personnaliser les fenêtres pop-up à l'aide de js. J'espère que cet article pourra aider les amis intéressés à découvrir les principes du code des fenêtres contextuelles personnalisées js !

L'exemple spécifique du premier code pop-up js est le suivant :

<!DOCTYPE html>
<html>
<head>
    <title>js自定义弹出框代码测试一</title>
    <meta charset="utf-8"/>
    <script type="text/javascript">
        function f1(){
            alert("这是第一种弹窗提示1 alert,单击确定后才能进行下一步的操作,只是提醒,不能对脚本产生任何改变");
        } 
        </script>
</head>
<body>
<button onclick="f1();">弹窗提示1</button>
</body>
</html>

L'effet est le suivant :

Comment implémenter la fenêtre pop-up js dans la page ? (divers exemples de styles)

Remarque : Fonction JavaScript alert()

alerte - une boîte de dialogue de message contextuel (il y a un bouton OK dans la boîte de dialogue)

alerte, "rappel" chinois "signifie

L'exemple spécifique du deuxième code pop-up js est le suivant :

<!DOCTYPE html>
<html>
<head>
    <title>js自定义弹出框代码测试</title>
    <meta charset="utf-8"/>
    <script type="text/javascript">
        function f2(){
            var flag = confirm("这是第二种弹窗提示2 confirm单击确定返回true,单击取消返回false");
            if(flag){
                alert("你点击的是确定");
            }else{
                alert("你单击的是取消");
            }
        }
        </script>
</head>
<body>
<button onclick="f2();">弹窗提示2</button>
</body>
</html>

L'effet est le suivant :

Comment implémenter la fenêtre pop-up js dans la page ? (divers exemples de styles)

Remarque : Le paramètre de la fonction confirm() est l'invite de la boîte de confirmation. La valeur de retour de cette fonction est booléenne. Si vous cliquez sur OK, la valeur de retour est vraie. Si vous cliquez sur Annuler, la valeur de retour est fausse.

L'exemple spécifique du troisième code pop-up js est le suivant :

<!DOCTYPE html>
<html>
<head>
    <title>js自定义弹出框代码测试</title>
    <meta charset="utf-8"/>
    <script type="text/javascript">
        function f3(){ 
            var name = prompt("请输入你的名字:","");
            console.log(name);
            console.log(typeof(name));
            if("php中文网" === name){
                alert("欢迎您:"+name);
            }else{
                alert("输入有误!");
            }
        }
    </script>
</head>
<body>
<button onclick="f3();">弹窗提示3</button>
</body>
</html>

L'effet est le suivant :

Comment implémenter la fenêtre pop-up js dans la page ? (divers exemples de styles)

Remarque : le troisième type de code contextuel js doit être noté. L'invite a deux paramètres, le premier est l'invite et le second est la valeur par défaut dans la boîte de dialogue lorsque la boîte de dialogue apparaît. dehors. Si vous cliquez sur le bouton Annuler, la valeur de retour est nulle et le type est objet. Si vous cliquez sur le bouton de confirmation, la valeur de retour est la chaîne saisie (chaîne vide lorsqu'elle n'est pas saisie) et le type est une chaîne.

[Recommandations d'articles connexes]

js pop -up window Explication de base

Comment utiliser JavaScript pour implémenter une boîte de dialogue contextuelle dans le coin inférieur droit

Comment utiliser JS et CSS3 pour créer un effet de fenêtre pop-up sympa

Implémentation jQuery d'un exemple simple de fenêtre pop-up

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：Résumé des méthodes de passage des paramètres en js (avec code)Article suivant：Résumé des méthodes de passage des paramètres en js (avec code)

Articles Liés

Voir plus