仿百度登陆弹框

20190107135130.png


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度登录框</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        
        #btn{
            position: absolute;
            top: 0px;
            left: 0px;
        }
        body
        {
            font-size: 12px;
        }
        a
        {
            text-decoration: none;
            color: #2647CB;
        }
        a:hover
        {
            text-decoration: underline;
            color: red;
        }
        .wrap
        {
            width: 390px;
            height: 450px;
            /*margin: 50px auto;*/
            border: 1px solid #8A8989;
            position: relative;
            /*display: none;*/
            z-index: 1000;
        }
        .main
        {
            width: 350px;
            height: 400px;
            margin: 0 auto;
        }
        .header
        {
            width: 100%;
            height: 50px;
            line-height: 50px;
            /*background-image: url(images/foot.png);*/
            background-color: rgb(247,247,247);
            background-repeat: no-repeat;
        }

        .header h3
        {
            display: inline-block;
            line-height: 50px;
            margin-left: 50px;
        }
        .header span
        {
            display: inline-block;
            float: right;
            margin: auto 15px;
            font-size: 30px;
        }

        .inputDiv
        {
            display: block;
            width: 350px;
            height: 40px;
            margin: 10px auto;
        }

        .phoneIn
        {
            display: inline-block;
            float: right;
            font-size: 14px;
            /*background-image: url(images/phone.png);*/
            background-repeat: no-repeat;
            padding-left: 20px;
            margin: 30px 0px 10px 0px;
        }

        .smBtn
        {
            background: #2066C5;
            color: white;
            font-size: 18px;
            font-weight: bold;
            height: 50px;
            border-radius: 4px;
        }

        .smBtn:hover
        {
            background: #4067EE;
        }

        .pull-right
        {
            display: inline-block;
            float: right;
        }

        .other
        {
            width: 350px;
            padding-top: 50px;
            margin: 0 auto;
        }

/*        .toggleDiv1,.toggleDiv2
        {
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 80;
*/
        .weima
        {
            text-align: center;
            padding-top: 50px;
            width: 390px;
            height: 400px;
        }

        .weima p 
        {
            line-height: 50px;
        }

        .choice2
        {
            display: none;

        }

        #close:hover
        {
            cursor: pointer;
            color: blue;
        }
    </style>
<!-- 导入jquery文件 -->

<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.hxsd.tools.js"></script>
 
</head>
<body>
    <button style="cursor: move;" type="button" id="btn">请登录</button>
</body>



        

<script>
/*    作业要求,点击按钮出现模态层,出现登陆弹窗,并且可以拖拽,
    点击登陆弹窗右上角关闭按钮,可以关闭模态层和弹窗   模拟百度登录*/
    

    
    
    $('#btn').click(function(){
        
        showCenter(
//---------------------------------------------------------------------------------------            
          $('<div>').addClass('wrap')
          .html('<div class="header title">'
          +'<h3>登录百度账号</h3>'
          +'<span id="close" title="关闭">X</span>'
          +'</div>'
          +'<div class="choice1">'
         +'<div class="main">'
         +'<a href="https://www.baidu.com" class="phoneIn">短信快捷登录</a>'
         +'<form action="">'
         +'<input type="text" class="inputDiv"  placeholder="手机/邮箱/账号">'
         +'<input type="password" class="inputDiv" placeholder="请输入登录密码">'
         +'<p class="inputDiv">'
         +'<input type="checkbox" value="checked" checked="checked"><label for="">下次自动登录</label>'
         +'<a href="https://www.baidu.com" class="pull-right" >登录遇到问题</a>'
         +'</p>'
         +'<input type="submit" value="登录"  class="inputDiv smBtn">'
         +'<a href="https://passport.baidu.com" class="pull-right" >立即注册</a>'
         +'</form>'
         +'<div class="other">'
         +'<p>可以使用以下方式登录</p>'
//                    <a href=""><img src="images/qq.png" alt=""></a>
//                    <a href=""><img src="images/wb.png" alt=""></a>
         +'</div>'
         +'</div>'
         +'<div class="toggleDiv1">'
//                <!--<img src="images/small2wm.png" alt="">
         +'</div>'
         +'</div>'
//        <!-- 二维码登录 -->
        +'<div class="choice2">'
        +'<div class="weima">'
        +'<p>手机扫描,安全登录</p>'
//        <img src="images/2weima.png" alt="">
        +'<p>请使用手机百度app扫描登录</p>'
        +'</div>'
        +'<div class="toggleDiv2">'
//                <img src="images/cpt.png" alt="">
        +'</div>'
        +'</div>'
        +'</div>'
         ).appendTo('body')
        
        
        
//---------------------------------------------------------------------------------------    

        );
        var $oM = modal();    
        drag($('.wrap'),$('.title'))
        $('#close').click(function () {            //点击绑定事件确定按钮
                $('.wrap').remove()             //删除弹窗$('.wrap')这个div
                $oM();                            //调用$oM = modal();闭包
        })
    })

</script>

</html>

标签: jQuery案例

添加新评论