页面效果：

html+js：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>my love-用户登录</title>

    <link rel="stylesheet" href="css/bootstrap.css">

    <link rel="stylesheet" href="css/login.css">

    <link rel="stylesheet" href="css/register.css">

    <script src="js/jquery.js" type="text/javascript"></script>

    <script src="js/modal.js" type="text/javascript"></script>

</head>

<body>

    <div class="main">

        <form class="form-horizontal" action="index.html">

            <div class="form-group">

                <label class="col-xs-3 col-md-3 control-label no-padding-right">用户名：</label>

                <div class="col-xs-7 col-md-7">

                    <input type="text" class="form-control input-user-name" placeholder="请输入用户名......">

                </div>

            </div>

            <div class="form-group">

                <label class="col-xs-3 col-md-3 control-label no-padding-right">密&nbsp;&nbsp;&nbsp;码：</label>

                <div class="col-xs-7 col-md-7">

                    <input type="password" class="form-control password-user-name" placeholder="请输入密码......">

                </div>

            </div>

            <div class="form-group bottom-button">

                <div class="col-xs-offset-4 col-xs-3 col-md-3">

                    <button type="button" class="btn btn-success login-success-button">登录</button>

                </div>

                <div class="col-xs-3 col-md-3">

                    <!-- Button register-modal -->

                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#register-modal">注册</button>

                </div>

            </div>

        </form>

        <!-- Modal -->

        <div class="modal fade" id="register-modal" tabindex="-1" role="dialog" aria-labelledby="register-modal-label">

            <div class="modal-dialog" role="document">

                <div class="modal-content">

                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                        <h4 class="modal-title" id="register-modal-label">新用户注册：</h4>

                    </div>

                    <div class="modal-body">

                        <div class="form-horizontal">

                            <div class="form-group">

                                <label class="col-xs-3 col-md-3 control-label no-padding-right">邮&nbsp;&nbsp;&nbsp;箱：</label>

                                <div class="col-xs-7 col-md-7">

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

                                </div>

                            </div>

                            <div class="form-group">

                                <label class="col-xs-3 col-md-3 control-label no-padding-right">用户名：</label>

                                <div class="col-xs-7 col-md-7">

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

                                </div>

                            </div>

                            <div class="form-group">

                                <label class="col-xs-3 col-md-3 control-label no-padding-right">密&nbsp;&nbsp;&nbsp;码：</label>

                                <div class="col-xs-7 col-md-7">

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

                                </div>

                            </div>

                            <div class="form-group">

                                <label class="col-xs-3 col-md-3 control-label no-padding-right">确认密码：</label>

                                <div class="col-xs-7 col-md-7">

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

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-info register-button">注册</button>

                        <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <script type="text/javascript">

        $(function() {

            $('.register-button').click(function() {

                document.location.href = "login.html";

            });

        });

    </script>

</body>

</html>

login.css

body {

    background: url(../image/sun.jpg) no-repeat;

    -moz-background-size: 100% 100%;

    -webkit-background-size: 100% 100%;

}

.main {

    width: 365px;

    height: 200px;

    margin: 230px auto;

    /*border: 2px solid #3a9c08;*/

}

.form-horizontal {

    padding-top: 30px

}

.main>.form-horizontal>.form-group>.col-xs-3.col-md-3.control-label.no-padding-right {

  color: #fff;

}

label.control-label.no-padding-right {

    padding-right:;

    font-size: 17px;

}

.form-horizontal .form-group {

    margin-right:;

    margin-left:;

}

.form-group.bottom-button {

    padding-top: 10px;

}

register.css

.modal-dialog .modal-content .modal-header {

    background: url(../image/registerTop.png) no-repeat;

    -moz-background-size: 100% 100%;

    -webkit-background-size: 100% 100%;

}

.modal-dialog .modal-content .modal-footer {

    background-color: #d5feff;

}

Bootstrap 模态框(Modal)插件的更多相关文章

  1. Bootstrap历练实例：模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  2. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  3. 禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭

    在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCo ...

  4. Bootstrap模态框modal的高度和宽度设置

    (1)高度 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会发生变化 如下图所示 ...

  5. 黄聪：bootstrap的模态框modal插件在苹果iOS Safari下光标偏离问题解决方案

    一行CSS代码搞定: body.modal-open { position: fixed; width: 100%; }

  6. Bootstrap模态框(modal)垂直居中

    http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...

  7. bootstrap模态框modal使用remote动态加载内容，第二次加载显示相同内容解决办法

    bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...

  8. Bootstrap模态框（MVC）

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

  9. Bootstrap3模态框Modal垂直居中样式

    1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. 完美判断iframe是否加载完成

    var iframe = document.createElement("iframe"); iframe.style.width = "265px"; ifr ...

  2. 干货分享：SQLSERVER使用裸设备

    干货分享:SQLSERVER使用裸设备 这篇文章也适合ORACLE DBA和MYSQL DBA 阅读 裸设备适用于Linux和Windows 在ORACLE和MYSQL里也是支持裸设备的!! 介绍 大 ...

  3. Oracle 的基本操作符

    != 不等于 select empno,ename,job from scott.emp where job!='manager' ^= 不等于 select empno,ename,job from ...

  4. iOS的ATS配置 - 2017年前ATS规定的适配

    苹果规定 从2017年1月1日起,新提交的 app 不允许使用NSAllowsArbitraryLoads来绕过ATS(全称:App Transport Security)的限制. 以前为了能兼容ht ...

  5. OpenGL超级宝典笔记----渲染管线

    在OpenGL中任何事物都在3D空间中,但是屏幕和窗口是一个2D像素阵列,所以OpenGL的大部分工作都是关于如何把3D坐标转变为适应你屏幕的2D像素.3D坐标转为2D坐标的处理过程是由OpenGL的 ...

  6. spring注解源码分析--how does autowired works？

    1. 背景 注解可以减少代码的开发量,spring提供了丰富的注解功能.我们可能会被问到,spring的注解到底是什么触发的呢?今天以spring最常使用的一个注解autowired来跟踪代码,进行d ...

  7. zookeeper源码分析之五服务端(集群leader)处理请求流程

    leader的实现类为LeaderZooKeeperServer,它间接继承自标准ZookeeperServer.它规定了请求到达leader时需要经历的路径: PrepRequestProcesso ...

  8. 初识的Spring Mvc-----原理

    一.Spring Mvc简介 Spring Mvc(Spring Web Mvc) 属于表现层的框架. 二.Spring结构图 Spring Mvc是Spring框架里面web模块的一部分,是在Spr ...

  9. 简单酷炫的canvas动画

    作为一个新人怀着激动而紧张的心情写了第一篇帖子还请大家多多支持,小弟在次拜谢. 驯鹿拉圣诞老人动画效果图如下 html如下: <div style="width:400px;heigh ...

  10. Android Weekly Notes Issue #235

    Android Weekly Issue #235 December 11th, 2016 Android Weekly Issue #235 本期内容包括: 开发一个自定义View并发布为开源库的完 ...