<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>

        body{

            background-color: #C7EDCC;

            font-family: "microsoft yahei";

            /*min-width: 800px;*/

        }

        img{

            width: 100%;

            /*height: 462px;*/

        }

        .navbar{

            /*margin-bottom: -10px;*/

        }

        #myppt{

            margin-top: -20px;

        }

    </style>

</head>

<body>

    <ul class="nav navbar-nav navbar-right">

        <li><a data-toggle="modal" data-target="#register" href=""><span class="glyphicon glyphicon-user"></span> 注册</a></li>

        <li><a data-toggle="modal" data-target="#login" href=""><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>

    </ul>

    <!-- 注册窗口 -->

    <div id="register" class="modal fade" tabindex="-1">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-body">

                    <button class="close" data-dismiss="modal">

                        <span>×</span>

                    </button>

                </div>

                <div class="modal-title">

                    <h1 class="text-center">注册</h1>

                </div>

                <div class="modal-body">

                    <form class="form-group" action="">

                            <div class="form-group">

                                <label for="">用户名</label>

                                <input class="form-control" type="text" placeholder="6-15位字母或数字">

                            </div>

                            <div class="form-group">

                                <label for="">密码</label>

                                <input class="form-control" type="password" placeholder="至少6位字母或数字">

                            </div>

                            <div class="form-group">

                                <label for="">再次输入密码</label>

                                <input class="form-control" type="password" placeholder="至少6位字母或数字">

                            </div>

                            <div class="form-group">

                                <label for="">邮箱</label>

                                <input class="form-control" type="email" placeholder="例如:123@123.com">

                            </div>

                            <div class="text-right">

                                <button class="btn btn-primary" type="submit">提交</button>

                                <button class="btn btn-danger" data-dismiss="modal">取消</button>

                            </div>

                            <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>

                    </form>

                </div>

            </div>

        </div>

    </div>

    <!-- 登录窗口 -->

    <div id="login" class="modal fade">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-body">

                    <button class="close" data-dismiss="modal">

                        <span>×</span>

                    </button>

                </div>

                <div class="modal-title">

                    <h1 class="text-center">登录</h1>

                </div>

                <div class="modal-body">

                    <form class="form-group" action="">

                            <div class="form-group">

                                <label for="">用户名</label>

                                <input class="form-control" type="text" placeholder="">

                            </div>

                            <div class="form-group">

                                <label for="">密码</label>

                                <input class="form-control" type="password" placeholder="">

                            </div>

                            <div class="text-right">

                                <button class="btn btn-primary" type="submit">登录</button>

                                <button class="btn btn-danger" data-dismiss="modal">取消</button>

                            </div>

                            <a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">还没有账号？点我注册</a>

                    </form>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

　　

Bootstrap点击弹出注册登录的更多相关文章

  1. web全栈开发之网站开发二（弹出式登录注册框前端实现-类腾讯）

    这次给大家分享的是目前很多网站中流行的弹出式登录框,如下面的腾讯网登录界面,采用弹出式登录的好处是大大提升了网站的用户体验和交互性,用户不用重新跳转到指定的页面就能登录,非常方便 先来个演示地址 要实 ...

  2. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  3. bootstrap弹窗、弹出层、modal

    bootstrap弹窗.弹出层.modal 引入bootstrap的js文件    如下div代码 <div class="modal fade" id="myMo ...

  4. php弹出式登录窗口并获得登录后返回值

    一款bootstrap样式结合php制作的弹出式登录窗口,输入用户名和密码后,ajax传参给后台,并获得登录后返回值. hwLayer+ajax弹出登录框 $(function() { $('#for ...

  5. JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片

    1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  6. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  7. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  8. jQuery之点击弹出图标环形菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  9. jquery---点击弹出层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Linux 安装(重装)mysql

    1 新建存放mysql相关文件的文件夹 mkdir -p /export/servers/mysql //存放mysql相关的几个rpm文件 2 查看原有mysql 并卸载 rpm -qa | gre ...

  2. java基础之io流总结三：字节流读写

    字节流读写适用于任何文件,包括图片,视频等. 基本字节流 一次读一个字节和一次读一个字节数组 FileInputStream fis = new FileInputStream(path); //一次 ...

  3. web服务器推送技术

    传统模式的 Web 系统以客户端发出请求.服务器端响应的方式工作.不能满足很多现实应用的需求,譬如: 监控系统:后台硬件温度.电压发生变化: 即时通信系统:其它用户登录.发送信息: 即时报价系统:后台 ...

  4. 回车换行0x0D和0x0A 小谈

    在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33)的玩意,每秒钟可以打10个字符.但是它有一个问题,就是打完一行换行的时候,要用去0.2秒,正好可以打两个字符.要是在这 ...

  5. c++多线程编程（三）

    关于WaitForSingleObject函数用法 : 用户模式的线程同步机制效率高,如果需要考虑线程同步问题,应该首先考虑用户模式的线程同步方法. 但是,用户模式的线程同步有限制,对于多个进程之间的 ...

  6. tomcat的配置文件有那些

    配置文件一般都在conf文件夹里,主要有server.xml,context.xml,tomcat_user.xml,web.xml四个常用配置文件,server主要是服务器设置的,例如端口设置,路径 ...

  7. c++原型模式（Prototype）

    原型模式是通过已经存在的对象的接口快速方便的创建新的对象. #include <iostream> #include <string> using namespace std; ...

  8. 【转】LVS负载均衡之session解决方案 持久连接

    原文地址:http://minux.blog.51cto.com/8994862/1744761 1. 持久连接是什么? 1.1 在LVS中,持久连接是为了用来保证当来自同一个用户的请求时能够定位到同 ...

  9. Docker学习笔记_安装和使用Zookeeper

    一.准备 1.宿主机OS:Win10 64位 2.虚拟机OS:Ubuntu18.04 3.账号:docker 二.安装 1.搜索镜像                                  ...

  10. R语言的并行运算(CPU多核)

    通常R语言运行都是在CPU单个核上的单线程程序.有时我们会有需求对一个向量里的元素应用相同的函数,最终再将结果合并,并行计算可以大幅节约时间. 为了支持R的并行运算, parallel包已经被纳入了R ...