<!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. 分布式基础学习【二】 —— 分布式计算系统（Map/Reduce）

    二. 分布式计算(Map/Reduce) 分布式式计算,同样是一个宽泛的概念,在这里,它狭义的指代,按Google Map/Reduce框架所设计的分布式框架.在Hadoop中,分布式文件系统,很大程 ...

  2. 代码查看import的类是出自哪个jar包的方法(转)

    import java.security.ProtectionDomain; import java.security.CodeSource; public static void main(Stri ...

  3. memcache 加载(对象)所遇到的问题。资源

    <?php $mem =new memcache(); if($mem->connect('127.0.0.1','11211')){ echo '连接OK'.'<br>'; ...

  4. sql server 错误总结

    1>无法访问sql server2000数据库 1.1>安装sql server2000 sp1的补丁包. 1.2>sql server 数据库开启了允许远程访问. 1.3>s ...

  5. 1.scala基础语法总结

    Scala基础语法总结:Scala 与 Java 的最大区别是:Scala 语句末尾的分号 ; 是可选的.如果一行里写多个语句那么分号是需要的 val s = "菜鸟教程"; pr ...

  6. Luogu 4155 [SCOI2015]国旗计划

    BZOJ 4444 倍增 + 贪心. 发现是一个环,先按照套路把环断开复制一倍,这样子的话覆盖完整个环就相当于覆盖一条长度不小于$m$的链,注意这样子有一些区间在新的这条链上会出现两次. 我们为了找到 ...

  7. UOJ 176 新年的繁荣

    挺妙的解法. 发现边权很小,我们可以考虑从大到小枚举边权来进行$kruskal$算法,这样子对于每一个边权$i$,我们只要枚举$0 \leq j < m$,找到一个点使它的点权为$i | 2^j ...

  8. 用JS实现点击TreeView根节点复选框全选

    以下两种方法哪个不报错就用哪个.用法都是在TreeView标签中加入OnClick="",然后引入函数名即可 第一种方法:(摘自:http://www.cnblogs.com/fr ...

  9. Yii2视频

    Yii2 视频分享 需要的小伙伴看过来链接: https://pan.baidu.com/s/1sl4H0RV 密码: nknx  (有问题请留言)

  10. Shiro——概述

    Apache Shiro 是 Java 的一个安全(权限)框架. Shiro 可以非常容易的开发出足够好的应用,其不仅可以用在JavaSE 环境,也可以用在 JavaEE 环境. Shiro 可以完成 ...