Progate中用html，js，css实现弹出注册页面

最新推荐文章于 2023-09-09 21:31:37 发布
最新推荐文章于 2023-09-09 21:31:37 发布
阅读量1.4k 收藏 4
点赞数
文章标签： java
aaa
本文链接：https://blog.csdn.net/djydjy3333/article/details/124000695
版权

不需要启动tomcat服务器就可以用，本质是html用js隐藏了部分表单

点击绿色按钮，弹出注册popup

在这里插入图片描述
项目构造如图，需要3个文件
不需要导入图片，也不需要导入jquery包
在这里插入图片描述

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<header>
    <div class="container">
        <div class="header-left">
            <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
        </div>
        <div class="header-right">
            <div class="login" id="login-show">ログイン</div>
        </div>
    </div>
</header>
<div class="signup-modal-wrapper" id="signup-modal">
    <div class="modal">
        <!-- モーダルの閉じるボタンのHTMLを貼り付けてください -->
        <!-- "close-modal"というclassをつけてください -->
        <div class="close-modal">
            <i class="fa fa-2x fa-times"></i>
        </div>

        <div id="signup-form">
            <h2>Emailで新規登録</h2>
            <form action="#">
                <input class="form-control" type="text" placeholder="メールアドレス">
                <input class="form-control" type="password" placeholder="パスワード">
                <div id="submit-btn">新規登録</div>
            </form>
        </div>
    </div>
</div>
<div class="login-modal-wrapper" id="login-modal">
    <div class="modal">
        <!-- モーダルの閉じるボタンのHTMLを貼り付けてください -->
        <!-- "close-modal"というclassをつけてください -->
        <div class="close-modal">
            <i class="fa fa-2x fa-times"></i>
        </div>

        <div id="login-form">
            <h2>Emailログイン</h2>
            <form action="#">
                <input class="form-control" type="text" placeholder="メールアドレス">
                <input class="form-control" type="password" placeholder="パスワード">
                <div id="submit-btn">ログイン</div>
            </form>
        </div>
    </div>
</div>
<div class="top-wrapper">
    <div class="container">
        <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
        <p>progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
        <div class="btn signup signup-show">新規登録はこちら</div>
        <p>or</p>
        <div class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</div>
        <div class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</div>
    </div>
</div>
<div class="lesson-wrapper">
    <div class="container">
        <div class="heading">
            <h2>Learn Where to Get Started!</h2>
        </div>
        <div class="lessons">
        </div>
    </div>
</div>
<div class="faq-wrapper">
    <div class="container">
        <div class="heading">
            <h2>FAQ</h2>
        </div>
        <div class="faq">
        </div>
    </div>
</div>
<div class="message-wrapper">
    <div class="container">
        <div class="heading">
            <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
            <h3 id="tagline">Let's learn to code, learn to be creative!</h3>
        </div>
        <div class="btn message signup-show">さっそく開発する</div>
    </div>
</div>
<footer>
    <div class="container">
        <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
        <p>Learn to Code,Learn to be Creative.</p>
    </div>
</footer>
<script src="script.js"></script>
</body>
</html>

script.js

$(function() {
    $('#login-show').click(function() {
        $('#login-modal').fadeIn();
    });

    $('.signup-show').click(function() {
        $('#signup-modal').fadeIn();
    });

    // 「.close-modal」要素にclickイベントを設定してください
    $('.close-modal').click(function() {
        $('#login-modal').fadeOut();
        $('#signup-modal').fadeOut();
    });

});

stylesheet.css

body {
    margin: 0;
}

a {
    text-decoration: none;
}

.top-wrapper {
    padding: 180px 0 100px 0;
    background-image: url(https://prog-8.com/images/html/advanced/top.png);
    background-size: cover;
    color: white;
    text-align: center;
}

.container {
    width: 1170px;
    padding: 0 15px;
    margin: 0 auto;
}

.top-wrapper h1 {
    opacity: 0.7;
    font-size: 45px;
    letter-spacing: 5px;
}

.top-wrapper p {
    opacity: 0.7;
    font-size: 14px;
    margin-bottom: 35px;
}

.signup {
    background-color: #239b76;
}

.facebook {
    background-color: #3b5998;
    margin-right: 10px;
}

.twitter {
    background-color: #55acee;
}

.btn {
    padding: 8px 24px;
    color: white;
    display: inline-block;
    opacity: 0.8;
    border-radius: 4px;
    cursor: pointer;
}

.btn:hover {
    opacity: 1;
}

.fa {
    margin-right: 5px;
}

header {
    height: 65px;
    width: 100%;
    background-color: rgba(34,49,52,0.9);
    position :fixed;
    top: 0;
    z-index: 10;
}

.logo {
    width: 124px;
    margin-top: 20px;
}

.header-left {
    float: left;
}

.header-right {
    float: right;
    background-color: rgba(255,255,255,0.3);
    transition: all 0.5s;
}

.header-right:hover {
    background-color: rgba(255,255,255,0.5);
}

.header-right .login {
    line-height: 65px;
    padding: 0 25px;
    color: white;
    cursor: pointer;
    display: block;
}

/*モーダル*/
.login-modal-wrapper, .signup-modal-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100;
    display: none;
}

.modal {
    position: absolute;
    top: 20%;
    left: 34%;
    background-color: #e6ecf0;
    padding: 20px 0 40px;
    border-radius: 10px;
    width: 450px;
    height: auto;
    text-align: center;
}

.fa-times {
    position: absolute;
    top: 12px;
    right: 12px;
    color: rgba(128, 128, 128, 0.46);
    cursor: pointer;
}

#signup-form, #login-form {
    width: 100%;
}

#signup-form h2, #login-form h2 {
    color: #5f5d60;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

#signup-form input, #login-form input {
    width: 320px;
    margin-bottom: 20px;
    font-size: 12px;
    padding: 12px 12px;
    border: 1px solid #d0d5d8;
    border-radius: 5px;
}

#submit-btn {
    display: inline-block;
    padding: 14px 140px;
    background-color: #5dca88;
    border: none;
    border-radius: 3px;
    color: white;
    margin: 10px auto;
    cursor: pointer;
}

.lesson-wrapper {
    height: 500px;
    padding-bottom: 80px;
    background-color: #f7f7f7;
    text-align: center;
}

.heading {
    padding-top: 60px;
    padding-bottom: 30px;
    color: #5f5d60;
}

.heading h2 {
    font-weight: normal;
}

/*faq wrapper*/
.faq-wrapper {
    background-color: #e6ecf0;
    text-align: center;
    padding-bottom: 80px;
    color: #5f5d60;
}

#faq-list {
    width: 500px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.message-wrapper {
    border-bottom: 1px solid #eee;
    padding-bottom: 80px;
    text-align: center;
}

.message-wrapper .heading h3 {
    font-weight: normal;
}

.message {
    padding: 15px 40px;
    background-color: #5dca88;
    cursor: pointer;
    box-shadow: 0px 7px #1a7940;
}

.message:active {
    position: relative;
    top: 7px;
    box-shadow: none;
}

footer img {
    width: 125px;
}

footer p {
    color: #b3aeb5;
    font-size: 12px;
}

footer {
    padding-top: 30px;
}
zhangsan3333
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用html实现一个注册网站，实现跳转
gyk1303的博客
10-25 4769
用html实现一个登录网站，实现跳转
登录注册弹出框html,jQuery实现弹出窗口中切换登录与注册表单
weixin_42349182的博客
06-08 3647
当点击页面中的登录或注册按钮时，将会弹出一个模态窗口，就是一个弹出层，我们可以在弹出层上轻松的切换登录与注册表单，极大的方便用户，不需要关闭层再去点击转向其他操作，在很多网站上已经广泛应用。本文结合实例，通过使用jQuery以及CSS3和HTML5技术实现这一效果。HTML我们现在主页面上设置两个链接按钮，即登录和注册按钮。登录注册然后，建立模态窗口弹出层div.cd-user-modal，在弹出...
(Html)实现一个账号密码登录的弹窗界面（代码）
小劉同学成长日记~~
09-08 2万+
【代码】(Html)实现一个账号密码登录的弹窗界面，闲杂日记~~
html中利用js写一个弹出注册框,利用jquery实现弹出注册框
weixin_30677191的博客
05-31 461
特效描述：利用jquery实现 弹出 注册框。利用jquery实现弹出注册框代码结构1. 引入CSS2. 引入JS3. HTML代码$(document).ready(function() {$("#login").click(function(){$.XYTipsWindow({___title:"登录",___content:"iframe:login.html",___width:"460"...
原生html页面弹窗_在HTML网页中设置弹出窗口的办法
weixin_39777543的博客
12-20 1056
【1、最基本的弹出窗口代码】其实代码非常简单：因为这是一段javascripts代码，所以它们应该放在之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。window.open('page.html')用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径...
html中用href 实现点击链接弹出文件下载对话框
01-19
今天又学了一招，以前不知道，就是做过的东西太少了…… ...浏览器支持能够打开的格式，他都会默认直接在线打开（比如word或图片），不支持的格式，他就会弹出下载提示。最好是做成.rar格式的文件
在html页面中用js与MyReport插件交互
03-02
Swf调用外部js方法，要确保js方法已存在，该条件一般都满足，因为swf加载比页面js慢。Js访问swf的接口时，要确保swf已经加载完成，该条件则需要做特殊的处理。如何做？可以想到的是，只有flash插件本身才知道自己...
HTML_CSS.rar_html注册css
09-21
在这个名为"HTML_CSS.rar_html注册css"的压缩包中，包含了一个名为"HTML_CSS.pdf"的文件，很可能是关于HTML与CSS结合使用的教程或参考资料。 HTML（HyperText Markup Language）是一种标记语言，用于构建网页的结构...
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】
热门推荐
weixin_52212950的博客
06-27 3万+
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS】
HTML+CSS+JS设计的注册界面
weixin_45755438的博客
10-20 4181
采用HTML+CSS+JS设计一个注册界面（register.html）：包含“请输入用户名”、“请输入密码”、“请再次输入密码”，并添加一个“验证码生成框”和“注册按钮” 1.1如果用户名框为空，弹出对话框提示“很抱歉，用户名不能为空!”，点击确定后，并将输入光标聚焦到用户名的输入框中 1.2如果密码框为空，弹出对话框提示“很抱歉，密码不能为空!”，点击确定后，并将输入光标聚焦到密码的输...
登录注册弹窗HTML_静态页面
07-03
Bootstrap登录注册弹窗HTML_静态页面登录注册弹窗HTML_静态页面登录注册弹窗HTML_静态页面
html css JS 小练习简单模拟百度注册页面 实现弹窗提示用户名等为空以及弹窗提示随机产生六位验证码
m0_58032275的博客
10-12 2335
简单模拟百度注册页面 原始页面 模拟 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js弹窗测试</title> <script type="text/javascript" src="js/test.js"></script> <link rel="stylesheet" href="css/testJs.css" t
html如何弹出注册页面窗口,JavaScript如何弹出输入窗口？
weixin_39859061的博客
06-03 646
JavaScript中可以使用window对象的prompt()方法来实现弹出输入框。prompt()方法用于显示可提示用户进行输入的对话框。Window 对象Window 对象表示浏览器中打开的窗口。如果文档包含框架( 或 标签)，浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。prompt() 方法prompt()方法用于显示可提示用户...
QQ注册界面仿写（HTML+CSS+JS）
不迁怒，不贰过。小知识，大智慧。
12-16 1万+
1:1还原仿写的QQ注册界面（利用HTML+CSS+JS技术）
【HTML】-- 用户注册表单
衍生星球的博客
06-11 7980
使用html标签做一个简单的注册表单，下面是一些常用的标签。 button标签：普通按钮，功能代码自定义。 submit：“确定” ，提交到后台。 reset：“取消” ，让表单控件原内容为空。 select标签：下拉选择框。 textarea：多行文本输入框。...
html中利用js写一个弹出注册框,[js高手之路]单例模式实现模态框的示例
weixin_30646295的博客
05-31 193
什么是单例呢？单，就是一个的意思。例：就是实例化出来的对象，那合在一起就是保证一个构造函数只能new出一个实例，为什么要学习单例模式呢？或者说单例模式有哪些常见的应用场景.它的使用还是很广泛，比如：弹出一个模态框，一般来说在网站中弹出的模态框，不停的一直点击，一般只能创建一个。还有后台的数据库连接，一般都是保证一个连接等等。今天的主题就是单例在模态框中的应用，我们先要搞清楚，怎么弄个单例出来.我们...
【HTML+CSS+JS】登录注册页面大合集
lion_no_back的博客
04-25 2万+
登录注册页面改造升级
HTML常用表单写一个百度搜索和注册页面
赵广陆
04-19 3227
目录 1.实战百度搜索，向百度服务器发送请求 2.注册的一个页面 1.实战百度搜索，向百度服务器发送请求 https://www.baidu.com/s？键1=值1&键2=值2 action：表单提交的位置 method（get/post）：表单提交的方式 GET: (1)参数会依附于url地址之后 (2)利用get方式提交数据，数据的长度有限制 ...
使用html、css、js制作一个简单且草率的弹出提示框
最新发布
Z_B_L的博客
09-09 5151
对于刚接触html5和css3的新手来说，alert弹出窗弊端不仅会阻止程序的执行，并且看起来十分简陋，不美观，视觉效果和实用性都不好，所以今天我将为大家展示：如何使用html和css、js制作一个简单的弹出窗。（ps：本篇为纯新手打造，恳请大佬多多批评）首先是html结构，一个弹窗，一个按钮。然后是css，设置背景，弹窗样式。根据个人需要可调整弹窗的事件。
html中用css实现背景渐变
05-20
可以使用CSS3中的linear-gradient()函数来实现背景渐变。具体方式如下： ```css background: linear-gradient(to bottom, #000000, #ffffff); ``` 这里使用了to bottom参数来指定渐变方向，#000000和#ffffff是起始...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值