用JQuery寫出登錄彈出框

本文轉載自查看原文 2017-10-05 11:13 4307

類似百度的登錄彈出框，可用jquery的fadeIn()，hide()，show()，slideDown()等動畫函數實現，一下為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>  
    <div>  
        <a class="btn btn-primary btn_click">百度登錄框</a>  
    </div>  
    <div class="box_lg">  
        <div class="box_tit">  
            <a class="close" href="#">×</a>  
            <h3>登錄賬號</h3>  
        </div>  
  
        <div 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>  
        </div>  
        <div class="box_ft">  
            <input type="checkbox" style="margin-right: 8px"><label>下次自動登錄</label>  
            <a href="#" >立即注冊</a>  
        </div>  
    </div>  
    <div class="box_bg"></div>  
</body>  
</html>

小結：為獲取文檔元素可以為該元素設置一個空類，由空類名稱獲取，如上面的獲取.close；在寫表單的時候可以放在<ol>和<ul>中，方便對齊格式；在寫css時需要對一些東西進行預設，如下：

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

注：文章轉載出入：http://blog.csdn.net/szu_aker/article/details/50792359

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 自己寫出的基於jquery的彈出提示框始終處於窗口的居中位置（類似於alert彈出框的效果） JQuery+CSS3實現封裝彈出登錄框效果 jquery dialog——彈出框1 jquery的Layer彈出框操作 jquery實現簡單彈出框 jquery 彈出對話框 jQuery layer[頁面彈出框] jQuery實現彈出框拖拽 jquery實現簡單的彈出框彈出框一之基於bootstrap和jquery的自定義彈出框