<!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. Dubbo简单介绍及其和zookeeper的关系

    何为Dubbo ​ Dubbox 是一个分布式服务框架,其前身是阿里巴巴开源项目Dubbo ,被国内电商及互联网项目中使用,后期阿里巴巴停止了该项目的维护,当当网便在Dubbo基础上进行优化,并继续维 ...

  2. 闲来无事，做做Google：21 道能力倾向测试面试题

    1. Solve this cryptic equation, realizing of course that values for Mand E could be interchanged. No ...

  3. VS快捷键小收集

    1. Ctrl-M-O 折叠所有方法      Ctrl-M-M 折叠或展开当前方法     Ctrl-M-L 展开所有方法 2. 行编辑(复制,剪切,删除,交换) 当你在光标停留行使用快捷键Ctrl ...

  4. php扩展开发3--扩展类传参数

    1.需要实现的细节 实现一个person类 ,实现一个doing方法和saying方法 在构造方法中传递一个数组,在doing中打印此数组 saying方法中,构建一个空数组,返回,不需要传参. 2. ...

  5. cocos2d-x 初探helloWorld

    cocos2d-x的main函数代码很少,把一些复杂的接口封装到AppDelegate类里了,“AppDelegate”从词意可以得出是app的代理类,而一些最早的场景都会在AppDelegate类里 ...

  6. hdu 2211 杀人游戏

    设f(N,K)返回最后取出的编号 那么f(n,k)进行第一次选后,剩下n-n/k个人,这剩下的人里最后被取出的编号为f(n-n/k,k)记为x 那么它在前一次队列里的编号则是(x-1)/(k-1)+x ...

  7. Hadoop深入学习：MapTask详解

    转自:http://flyingdutchman.iteye.com/blog/1878775#bc2337280 Hadoop深入学习:MapTask详解 博客分类: Hadoop MapTask执 ...

  8. 编写高质量代码改善C#程序的157个建议——建议37：使用Lambda表达式代替方法和匿名方法

    建议37:使用Lambda表达式代替方法和匿名方法 在建议36中,我们创建了这样一个实例程序: static void Main(string[] args) { Func<int, int, ...

  9. APUE（3）---文件I/O (1)

    一.引言 UNIX系统中的大多数文件对I/O只需用到5个函数:open/read/write/lseek和close,这些函数都是不带缓冲I/O(Unbuffered I/O).只要涉及到多个进程间共 ...

  10. APUE（1）----UNIX基础知识

    一.UNIX体系结构 所有操作系统都为他们所运行的程序提供服务,典型的服务包括:执行新程序.打开文件.读文件.分配存储区等.严格意义上来说,操作系统可以定义为一种软件,它控制计算机硬件资源,提供程序运 ...