弹出式登录界面

最新推荐文章于 2024-06-05 23:56:34 发布
最新推荐文章于 2024-06-05 23:56:34 发布
阅读量2.2w 收藏 97
点赞数 8
分类专栏： HTML
要实现这个功能的大致思路是：

1.首先要在页面上设置一个登录按钮，可以是<button><a><img>都行，我们点击这个元素的时候会弹出登录框：


2.其次在页面合适位置制作两个<div>，一个登录功能的div,另一个注册功能的div，注意位置的设置，当网站首次加载进入的时候登录框不可见，那就要把样式设置为display:"none"

3.当用户点击登录按钮的时候，通过JS设置登录div的display=""，如何用户点击了登录界面上的注册按钮时，通过jQuery切换div透明和大小就可以完美实现登录注册的切换


4.关闭登录框的话也是同样的道理，把两个div的display设置为none就行
代码如下：

sign.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sign</title>
    <style>
        body {
            text-align: center;
            background-color: burlywood;
        }
        .signform {
            font-family: 微软雅黑;
            position: fixed;
            background-color: white;
            top: 20%;
            left: 30%;
            width: 500px;
            height: 400px;
            border-radius: 1em;
            text-align: center;
            z-index: 999;
        }
        #registerform {
            height: 450px;
        }
        .signclose {
            cursor: pointer;
            float: right;
            overflow: hidden;
            text-align: center;
            position: relative;
            height: 35px;
            width: 35px;
            margin-top: 10px;
            margin-right: 10px;
        }
        #registerloading{
            position: absolute;
            width: 25px;
            height: 25px;
            left: 410px;
            top: 90px;
        }
        .signinput {
            text-align: center;
            border-radius: 0.2em;
            width: 280px;
            height: 45px;
            border: none;
            background-color:#f2f2f2;
            font-size: 28px;
        }
        .signinput::-webkit-input-placeholder {
            font-size: 26px;
        }
        .userdiv {
            position: relative;
            margin-top: 80px;
        }
        .pwddiv {
            position: relative;
            margin-top: 20px;
        }
        .postdiv {
            position: relative;
            margin-top: 20px;
        }
        .postdiv button {
            cursor: pointer;
            color: white;
            font-size: 26px;
            border: none;
            border-radius: 0.4em;
            width: 280px;
            height: 45px;
            background-color:#4CAF50;
        }
    </style>
    <link rel="stylesheet" href="./sign.css">
</head>
<body>
<div>
    <button id="displaysign" οnclick="start()">点击登录</button>
</div>
<div class="signform" id="signform" style="display: none">
    <div class="signclose">
        <img src="image/signclose.ico" width="35px" height="35px" οnclick="signclose()">
    </div>
    <div class="userdiv">
    <input id="user" class="signinput" type="text" placeholder="用户名" name="user" >
    </div>
    <div class="pwddiv">
    <input id="pwd" class="signinput" type="password" placeholder="密码" name="pwd">
    </div>
    <div class="postdiv">
    <button>登录</button>
    </div>
    <br>
    <div class="change" style="color: #4d4d4d">
        <p>还没有账号?赶快<a href="#" style="text-decoration: none;color: #43A047">注册</a>一个吧</p>
    </div>
</div>
<div class="signform" id="registerform" style="display: none">
        <div class="signclose">
            <img src="image/signclose.ico" width="35px" height="35px" οnclick="signclose()">
        </div>
        <div class="userdiv">
            <input  id="registeruser" class="signinput" οnblur="loading()" type="text" placeholder="用户名" name="user">
        </div>
    <img src="image/signloading.gif" style="display: none" id="registerloading">
        <div class="pwddiv">
            <input  id="registerpwd" class="signinput" type="password" placeholder="密码" name="pwd">
        </div>
        <div class="pwddiv">
            <input  id="registerrepwd" class="signinput" type="password" placeholder="再次输入密码" name="pwd">
        </div>
        <div class="postdiv">
            <button>注册</button>
        </div>
        <br>
        <div class="change" style="color: #4d4d4d">
            <p>已有账号?立刻去<a href="#" style="text-decoration: none;color: #43A047">登录</a>吧</p>
        </div>
</div>
</body>
<script src="./jquery-3.2.1.min.js"></script>
<script src="./signformchange.js"></script>
</html>

sign.css

/*
* @Author: xshis
* @Date:   2018-05-23 11:45:25
* @Last Modified by:   xshis
* @Last Modified time: 2018-05-23 11:45:28
*/
body {
    text-align: center;
    background-color: burlywood;
}
#displaysign{
    position: relative;
    top: 80px;
    width: 70px;
    height: 40px;
}
.signform {
    font-family: 微软雅黑;
    position: fixed;
    background-color: white;
    top: 20%;
    left: 30%;
    width: 500px;
    height: 400px;
    border-radius: 1em;
    text-align: center;
    z-index: 999;
}
#registerform {
    height: 450px;
}
.signclose {
    cursor: pointer;
    float: right;
    overflow: hidden;
    text-align: center;
    position: relative;
    height: 35px;
    width: 35px;
    margin-top: 10px;
    margin-right: 10px;
}
#registerloading{
    position: absolute;
    width: 25px;
    height: 25px;
    left: 410px;
    top: 90px;
}
.signinput {
    text-align: center;
    border-radius: 0.2em;
    width: 280px;
    height: 45px;
    border: none;
    background-color:#f2f2f2;
    font-size: 28px;
}
.signinput::-webkit-input-placeholder {
    font-size: 26px;
}
.userdiv {
    position: relative;
    margin-top: 80px;
}
.pwddiv {
    position: relative;
    margin-top: 20px;
}
.postdiv {
    position: relative;
    margin-top: 20px;
}
.postdiv button {
    cursor: pointer;
    color: white;
    font-size: 26px;
    border: none;
    border-radius: 0.4em;
    width: 280px;
    height: 45px;
    background-color:#4CAF50;
}

signformchange.js

/*
* @Author: xshis
* @Date:   2018-05-23 11:45:50
* @Last Modified by:   xshis
* @Last Modified time: 2018-05-23 11:45:52
*/
$(function ()
{
        $('.change a').click(function ()
        {
            $('.signform').animate({height: 'toggle', opacity: 'toggle'}, 'slow');
        });
})

function start() {
document.getElementById('signform').style.display=""
}

function signclose() {
    document.getElementById('signform').style.display="none"
    document.getElementById('registerform').style.display="none"
}
function loading() {
    document.getElementById('registerloading').style.display=""
}

需要自己引入juqery库，就可以跑起来了

本文转载至：https://www.cnblogs.com/liujianhuaIT/p/6256261.html

weixin_42266757
关注
  • 8
    点赞
  • 踩
  • 97
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Selenium打开页面，出现弹窗需要登录账号密码，怎么解决？
Python进阶专栏《爬虫实战进阶》，《数据分析入门与实战》原创作者
08-27 5855
有时候，遇到需要登录账号密码的情况，无疑会想到用selenium。用selenium打开普通页面，其实都非常简单，但是你有没有遇到过这样的情况呢？
(css)自定义登录弹窗页面
nyf_unknow的博客
07-21 875
效果：-- 登录弹窗 -- > < el - dialog : visible . sync = "dialogVisible" title = "用户登录" width = "25%" center。
html5登录玻璃界面特效
最新发布
云加速
06-05 54
HTML5中实现登录界面的玻璃特效通常涉及到CSS3的一些高级特性，比如渐变、阴影、透明以及伪元素等。属性在一些旧的浏览器版本中可能不受支持，因此在实际项目中使用时需要考虑兼容性问题。此外，根据设计需求，你可能还需要调整颜色、大小和其他样式属性以适应你的项目。
完美的 登录注册框 含漂亮的过渡、转换效果
thewebcode
08-17 830
Html代码 &lt;divid="container_demo"&gt; &lt;!--hiddenanchortostopjumphttp://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4--&gt; &lt;aclass="hiddenan...
登录注册表单切换动画CSS3代码
ICode联盟
04-07 318
下载地址 一个界面漂亮的注册和登录表单样式，表单之间的切换效果也很炫酷，使用CSS3漂移动画做切换效果。 dd:
(Html)实现一个账号密码登录的弹窗界面（代码）
热门推荐
小劉同学成长日记~~
09-08 2万+
【代码】(Html)实现一个账号密码登录的弹窗界面，闲杂日记~~
点击登陆链接在本页面弹出一个登陆窗口效果
一只小菜鸟的技术博客
09-29 1万+
效果描述：点击登陆链接在本页面弹出一个登陆窗口效果，页面变灰暗，且不关闭窗口页面无法浏览。 效果图： 1.页面代码： 登陆 登陆 用户名/Email： 密码：
html+css源码之实现登录弹出框遮罩层效果
weixin_34252686的博客
10-09 721
在web开发中，很多网站都做了一些特别炫丽的效果，比如用户登录弹框遮罩层效果，本文章向大家介绍css如何实现登录弹出框遮罩层效果，需要的朋友可以参考一下本文章的源代码。 html+css实现登录弹出框遮罩层效果,源代码如下： <!DOCTYPE html> <html> <head> <style type='text/css'> #l...
登录/注册后跳回登录/注册前的页面实现方法
蓝剑专栏
12-19 9999
网站开发中经常会遇到这样的问题，登录后自动转到了首页或者用户管理首页，这样有时候会让用户觉得很不方便，特别是电子商务类的网站，当用于在浏览产品页面时，需要购买，但是只有登录后的用户才能进入购买页面，所以如果当用户登录后进入的不是他登录前的产品浏览页面，他得去重新找，这是非常不友好的。可以通过request.getHeader("referer");方式来实现登录/注册后返回进入登录或注册页面前
实战CSS：模拟登录注册静态实现
KaiSarH
12-16 1094
模拟登录注册静态实现
纯css实现登录表单动效
大白兔奶糖的博客
08-03 1563
【代码】纯css实现登录表单动效。
html、css 实现网页弹出层
Zhangguohao666的博客
12-05 1万+
只使用html、css，一步步教你实现网页弹出登录窗口
php js 弹出登录界面,css和js实现弹出登录居中界面完整代码
weixin_36013970的博客
04-08 278
我实现的这个和许多网站上的登录弹出窗口差不多，大家举一反三，先看我写完后的结果。点击创建相册后会在这个屏幕的中间显示创建相册的表单，整个背景颜色变暗，点击右上角的X会关闭这个表单。html代码创建按钮创建相册背景div和表单div创建相册 ...css代码.background {display: none;position:fixed;top:0px;left:0px;width:100%...
纯html css登录页面
r081r096的博客
12-01 156
【代码】纯html css登录页面。
HTML+CSS登录注册界面
m0_55586329的博客
05-26 1万+
目录一、效果演示1、注册界面2、登录界面二、代码实现2.1、HTML主页面2.2、CSS代码2.3、JS代码 一、效果演示 1、注册界面 2、登录界面 [注]: 这里需要我们创建三个文件，一个是index.html文件，一个是style.css文件还有一个是login.js文件，把代码copy上去 只要路径找好就能正常运行了。 二、代码实现 2.1、HTML主页面 <!DOCTYPE html> <html lang="en"> <head> <me
js+css实现点击导航条“登录”弹出登录框界面
杉楂的博客
12-13 1万+
依旧是项目的登录问题，不过这次是界面。 实现弹出页面的效果还可以使用如bootstrap模态框一类的javascript插件，不过这里使用的是js+css简单实现的效果。 首先是导航条的“登录”： nav-login" href="javascript:;">登录 接着是login表单界面： login-form"> × 用户登录 用户名 密码
前端-h5移动端星空效果登录界面
qq_43399210的博客
10-19 3786
H5移动端登录界面 分享个人在学习前端过程中自己做的移动端的登录和和注册界面，部分内容参考大佬写的样式。如果有更好的建议或者有错误的地方希望各位大佬留言、评论。谢谢大家 html代码 下面是登录界面的HTML代码 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="frozen.css"> <meta cha
php验证登陆 弹窗,怎样用ajax实现弹窗登录
weixin_39752087的博客
03-22 504
这次给大家带来怎样用ajax实现弹窗登录，用ajax实现弹窗登录的注意事项有哪些，下面就是实战案例，一起来看一下。下面介绍如何实现AJAX弹窗登录。在ECSHOP中的user.PHP中有处理用户登录的请求。/* 处理 ajax 的登录请求 */elseif ($action == 'signin'){include_once('includes/cls_json.php');$json = new...
打开页面自动弹出登陆提示框
yoki370的博客
06-02 3159
效果图： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px;
matlab弹出式菜单
08-12
在 MATLAB 中，您可以使用 `uimenu` 函数创建弹出式菜单。以下是一个简单的示例： ```matlab % 创建一个新的图形窗口 figure; % 创建一个菜单栏 menuBar = uimenu('Label', '菜单'); % 在菜单栏中添加一个弹出式菜单 popupMenu = uimenu(menuBar, 'Label', '弹出式菜单'); % 在弹出式菜单中添加子菜单项 menuItem1 = uimenu(popupMenu, 'Label', '菜单项1', 'Callback', @menuCallback1); menuItem2 = uimenu(popupMenu, 'Label', '菜单项2', 'Callback', @menuCallback2); % 定义菜单项的回调函数 function menuCallback1(~, ~) disp('菜单项1被点击'); end function menuCallback2(~, ~) disp('菜单项2被点击'); end ``` 在上面的示例中，我们首先创建一个新的图形窗口，然后使用 `uimenu` 函数创建一个菜单栏。然后，我们在菜单栏中添加一个弹出式菜单，并在弹出式菜单中添加两个子菜单项。每个子菜单项都可以设置回调函数，在被点击时执行相应的操作。 注意：此示例是基于 MATLAB 的图形用户界面（GUI）开发。如果您想在命令行环境下创建弹出式菜单，可以考虑使用 `menu` 函数。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值