slxz.html 5.1 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>申领须知</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/slxz.css">
    <script src="js/base.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div class="home_container">

        <!--主体文字-->
        <div class="main">
            <div class="main_text">
                <p>测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                    测试文字 测试文字测试文字 测试文字测试文字 测试文字
                </p>
            </div>
        </div>
        <!--点击下载按钮-->
        <div class="btn_box">
            <div class="btn_box_a" >
                <a href="#">点击下载</a>
            </div>
        </div>
    </div>

    <!--设置Onclick样式-->
    <div class="download_container" style="display:none">
        <div class="download_container_main">
            <div class="download_container_main_top">
                填写邮箱
            </div>
            <div class="download_container_main_text">
                请填写邮箱,我们会将资料发到您的邮箱
            </div>
            <!--输入框-->
            <div class="download_container_main_input">
                <input type="text">
            </div>
            <!--按钮-->
            <div class="download_container_main_bottom">
                <div class="download_container_main_bottom_left">
                    确定
                </div>
                <div class="download_container_main_bottom_right" id="btn_close">
                    取消
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        // 遮罩层 以及 内容
        $(".btn_box_a").click(function(){
            $(".download_container").css("display","block")
            $(this).css("background","#CCCCCC")
        })
        $("#btn_close").click(function () {
            $(".download_container").css("display","none")
            $(".btn_box_a").css("background","#0A84D9")
        })

    });

</script>
</body>
</html>