recherche

Maison >interface Web >js tutoriel >Comment écrire une boîte de dialogue de connexion en utilisant JQuery

Comment écrire une boîte de dialogue de connexion en utilisant JQuery

一个新手
一个新手original
2017-10-09 10:13:492843parcourir

Une boîte de dialogue de connexion similaire à Baidu peut être implémentée avec fadeIn(), hide(), show(), slideDown() et d'autres fonctions d'animation de jquery. Voici le code html5

 : 


<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title></title>  
    <link type="text/css" rel="stylesheet" href="msty.css">  
    <script src="jquery-2.2.1.min.js"></script>  
    <script type="text/javascript">  
        $(document).ready(function(){  
            $(".btn_click").click(function(){  
//                alert("hello");                  
            $(".box_bg").fadeIn(100);  
                $(".box_lg").slideDown(200);  
            });  
            $(".close").click(function(){  
                $(".box_bg").fadeOut(100);  
                $(".box_lg").hide(100);  
            })  
        });  
    </script>  </head>  <body>  
    <p>  
        <a class="btn btn-primary btn_click">百度登录框</a>  
    </p>  
    <p class="box_lg">  
        <p class="box_tit">  
            <a class="close" href="#">×</a>  
            <h3>登录账号</h3>  
        </p>  
  
        <p class="box_cont">  
            <form class="box_frm" action="http://www.baidu.com">  
                <ol>  
                    <li><input type="text" class="ipt" placeholder="学号"/></li>  
                    <li><input type="text" class="ipt" placeholder="密码"/></li>  
                    <li><input type="submit" value="登录" class="btn btn-primary btn_frm"></li>  
                </ol>  
            </form>  
        </p>  
        <p class="box_ft">  
            <input type="checkbox" style="margin-right: 8px"><label>下次自动登录</label>  
            <a href="#" >立即注册</a>  
        </p>  
    </p>  
    <p class="box_bg"></p>  
    </body>  
    </html>

Résumé : Pour obtenir un élément de document, vous pouvez définir une classe vide pour l'élément et l'obtenir par la classe vide name, comme get.close ci-dessus; dans Lors de l'écriture d'un formulaire, vous pouvez le placer dans c34106e0b4e09414b63b2ea253ff83d6 et ff6d136ddc5fdfeffaf53ff6ee95f185 pour faciliter l'alignement du format lors de l'écriture de CSS, vous devez prédéfinir certaines choses, comme suit : 


*{  
    padding: 0px;  
    margin: 0px;  
}  
ol,ul{  
    list-style:none;  
}  
a{  
    text-decoration: none;  
}  
input,label{  
    vertical-align: middle;  
}

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：Téléchargement et téléchargement de fichiers SpringMvcArticle suivant：Téléchargement et téléchargement de fichiers SpringMvc

Articles Liés

Voir plus