云服务器 199 / 年,新老同享,开发者力荐特惠渠道
阿里云推广

输入卡号密码弹层以及遮罩,点击遮罩取消弹层实现案例

  • 内容
  • 评论
  • 相关

cover.jpg

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta id="viewport" name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
    <script type='text/javascript' src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js'></script>
    <title>礼物详情</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .zhe {
        position: absolute;
        z-index: 99;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: none;
        transition: background 350ms cubic-bezier(.165, .84, .44, 1);
        background: rgba(0, 0, 0, .4);
        box-shadow: -4px 0 4px rgb(0 0 0 / 50%), 4px 0 4px rgb(0 0 0 / 50%);
        -webkit-tap-highlight-color: transparent;
    }
    .input_pwd {
        width: 95%;
        height: 337px;
        position: fixed;
        top: 30%;
        display: none;
        background: white;
        z-index: 100;
        border-radius: 10px;
    }
    .span_i {
        padding: 0;
        margin-top: 10px;
        border-bottom: 1px solid gainsboro;
        height: 40px;
        line-height: 40px;
        white-space: nowrap;
        overflow: hidden;

    }
    .span_i input {
        height: 100%;
        width: 100%;
        border: none;
    }
    .btn_scard {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .btn_scard button {
        width: 96%;
        height: 41px;
        margin: 30px 0;
        background: #35bf4a;
        border: none;
        color: white;
    }
</style>

<body style="width: 100%;height: 100%;background: #F6F6F6;">

    <!-- 商品详情 -->
    <section class="commodity">
        <div class="core">
            我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
            我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
            我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
            我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
            我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
            我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
            我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
            我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
            我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
            我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
            我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />

        </div>
    </section>


    <div class="zhe" style="width: 100vw;height:100vh;position:fixed;"></div>

    <div style="width:100%;display:flex;flex-direction:row;justify-content:center;z-index:9999;">
        <div class="input_pwd">

            <div style="margin-top:40px"></div>
            <div class="all_i" style="margin:0 auto;width:90%">
                <div class="span_i">
                    <span>卡号:<input type="text" name="s_cardnum" value="cs1001"></span>
                </div>
                <div class="span_i">
                    <span>密码:<input type="password" name="s_cardpwd" value="" placeholder="请输入密码"></span>
                </div>
                <div class="btn_scard">
                    <button class="sub_sc">提交</button>
                </div>
            </div>
        </div>
    </div>




</body>

</html>

<script>
    $(".zhe").show();
    $(".input_pwd").show();
    $(".zhe").click(function () {
        $(".zhe").hide();
        $(".input_pwd").hide();
    })
</script>

本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:输入卡号密码弹层以及遮罩,点击遮罩取消弹层实现案例 - http://www.wlphp.com/?post=379

发表评论

电子邮件地址不会被公开。 必填项已用*标注