<!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. 在页面完成读取EXCEL

    protected void btnUpload_Click(object sender, EventArgs e) { if (Page.IsValid) { string sFILENAME = ...

  2. Jmeter调度器配置

    Jmeter的线程组设置里有一个调配器设置,用于设置该线程组下脚本执行的开始时间.结束时间.持续时间及启动延迟时间.当需要半夜执行性能测试时会用到这个功能. ps:设置调度器配置,需要将前面的循环次数 ...

  3. 基于 EntityFramework 的数据库主从读写分离架构（2）- 改进配置和添加事务支持

        回到目录,完整代码请查看(https://github.com/cjw0511/NDF.Infrastructure)中的目录:      src\ NDF.Data.EntityFramew ...

  4. Zephyr Introduction

    wiki Importer Workflow wiki https://zephyrdocs.atlassian.net/wiki/display/ZTD/Zephyr+for+JIRA+Docume ...

  5. 设计模式03： Builder 生成器模式（创建型模式）

    Builder生成器模式(创建型模式) Builder模式缘起假设创建游戏中的一个房屋House设施,该房屋的构建由几个部分组成,且各个部分富于变化.如果使用最直观的设计方法,每个房屋部分的变化,都将 ...

  6. wpf控件开发基础

    wpf控件开发基础(3) -属性系统(2) http://www.cnblogs.com/Clingingboy/archive/2010/02/01/1661370.html 这个有必要看看 wpf ...

  7. wc.exe C++实现

    目录 Github项目地址 PSP表格 解题思路 设计实现过程 测试运行 项目小结 Github项目地址 wc-project PSP表格 PSP2.1 Personal Software Proce ...

  8. jQuery拾忆

    用jQuery操作select元素 http://www.jb51.net/article/23648.htm 表单中如果用disabled属性,则提交时不会提交该数据,尽量使用readonly属性 ...

  9. whereis libjpeg.so.7

    在服务器上调用import ImageFont时报如下错误 ImportError: The _imagingft C module is not installed (服务器为Centos5.5, ...

  10. 【转】Android android listview的HeadView左右切换图片（仿新浪，网易，百度等切换图片）

    首先我们还是看一些示例:(网易,新浪,百度)      下面我简单的介绍下实现方法:其实就是listview addHeaderView.只不过这个view是一个可以切换图片的view,至于这个vie ...