html 设置弹出登录界面

在网页开发中，弹出框是一种非常常见的功能，可以用于弹出登录界面、提示框、确认框等。本文就来介绍通过HTML和CSS设置弹出登录界面的方法。

!-- HTML部分 -->
    !DOCTYPE html>
    html>
    head>
    meta charset="UTF-8">
    title>
    弹出登录界面/title>
    style>
/* 设置遮罩层，背景为黑色，透明度为0.6 */.mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 9999;
}
/* 设置弹出框样式 */.login{
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%,0);
    background-color: #fff;
    z-index: 10000;
    width: 300px;
    padding: 10px;
    border-radius: 5px;
}
/* 设置登录按钮样式 */.login button{
    background-color: #3c8dbc;
    border: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 10px;
}
    /style>
    /head>
    body>
    button onclick="showLogin()">
    登录/button>
    div class="mask" id="mask" style="display: none;
    ">
    /div>
    div class="login" id="login" style="display: none;
    ">
    h3>
    登录/h3>
    form action="" method="post">
    label>
    用户名：input type="text" name="username">
    /label>
    br/>
    label>
    密码：input type="password" name="password">
    /label>
    br/>
    button type="submit">
    登录/button>
    /form>
    /div>
    script>
function showLogin(){
    //显示遮罩层和登录框var mask = document.getElementById('mask');
    var login = document.getElementById('login');
    mask.style.display = 'block';
    login.style.display = 'block';
}
    /script>
    /body>
    /html>
    

以上代码中，我们设置了一个隐藏的遮罩层，用于遮挡背景，当用户点击登录按钮时，显示登录框并弹出遮罩层，避免用户在登录框之外进行操作。

弹出框样式设置了宽度、边距、圆角等属性。登录按钮样式也做了定制，使用了蓝色背景和白色字体，整体给人一种干净利落的感觉。

如果您需要自定义登录框的样式或内容，可以根据需求修改代码。相信本文对您设置和使用弹出登录界面有一定的帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！