页面效果：

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. Apache执行Python脚本

    由于经常需要到服务器上执行些命令,有些命令懒得敲,就准备写点脚本直接浏览器调用就好了,比如这样: 因为线上有现成的Apache,就直接放它里面了,当然访问安全要设置,我似乎别的随笔里写了安全问题,这里 ...

  2. 简单粗暴地理解js原型链--js面向对象编程

    原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...

  3. 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  4. Carousel 旋转画廊特效的疑难杂症

    疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美, ...

  5. [原] KVM 虚拟化原理探究（3）— CPU 虚拟化

    KVM 虚拟化原理探究(3)- CPU 虚拟化 标签(空格分隔): KVM [TOC] CPU 虚拟化简介 上一篇文章笼统的介绍了一个虚拟机的诞生过程,从demo中也可以看到,运行一个虚拟机再也不需要 ...

  6. linux服务器开发一 基础

    注:本文仅限交流使用,请务用于商业用途,否则后果自负! Linux 1.Linux介绍 Linux是类Unix计算机操作系统的统称. Linux操作系统的内核的名字也是“Linux”. Linux这个 ...

  7. Java 程序优化 (读书笔记)

    --From : JAVA程序性能优化 (葛一鸣,清华大学出版社,2012/10第一版) 1. java性能调优概述 1.1 性能概述 程序性能: 执行速度,内存分配,启动时间, 负载承受能力. 性能 ...

  8. 微信小程序之用户数据解密(七)

    [未经作者本人同意,请勿以任何形式转载] 经常看到有点的小伙伴在群里问小程序用户数据解密流程,所以打算写一篇关于小程序用户敏感数据解密教程: 加密过程微信服务器完成,解密过程在小程序和自身服务器完成, ...

  9. ASP.Net MVC 5 in Xamarin Studio 5.2

    Xamarin Studio 是一个Mono的跨平台 IDE(Integrated Development Environment),支持Wiindow和Mac,最新发布的5.2 版本支持ASP.NE ...

  10. [译]DbContext API中使用SqlQuery和ExecuteSqlCommand获取存储过程的输入输出参数

    水平有限,欢迎指正.原文:http://blogs.msdn.com/b/diego/archive/2012/01/10/how-to-execute-stored-procedures-sqlqu ...