页面效果：

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. 自定义基于 VLC 的视频播放器

    前言(蛋疼的背景故事) 前段时间,接了一个小项目,有个需求是要在系统待机一段时间以后,循环播放 MV(类似于 Windows 系统的屏幕保护). 听到这个需求,我首先想到的是 MediaPlayer ...

  2. C# Web应用调试开启外部访问

    在用C#开发Web应用时有个痛点,就是本机用VS开启Web应用调试时外部机器无法访问此Web应用.这里将会介绍如何通过设置允许局域网和外网机器访问本机的Web应用. 目录 1. 设置内网访问 2. 设 ...

  3. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  4. iOS开发系列--Swift语言

    概述 Swift是苹果2014年推出的全新的编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程中不仅保留了ObjC很多语法特性,它也借鉴了多种现代化语言的特点,在 ...

  5. Python高手之路【一】初识python

    Python简介 1:Python的创始人 Python (英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种解释型.面向对象.动态数据类型的高级程序设计语言,由荷兰人Guido ...

  6. iOS热更新-8种实现方式

    一.JSPatch 热更新时,从服务器拉去js脚本.理论上可以修改和新建所有的模块,但是不建议这样做. 建议 用来做紧急的小需求和 修复严重的线上bug. 二.lua脚本 比如: wax.热更新时,从 ...

  7. 《Django By Example》第一章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:本人目前在杭州某家互联网公司工作, ...

  8. warensoft unity3d 更新说明

    warensoft unity3d 组件的Alpha版本已经发布了将近一年,很多网友发送了改进的Email,感谢大家的支持. Warensoft Unity3D组件将继续更新,将改进的功能如下: 1. ...

  9. 趣说游戏AI开发：曼哈顿街角的A*算法

    0x00 前言 请叫我标题党!请叫我标题党!请叫我标题党!因为下面的文字既不发生在美国曼哈顿,也不是一个讲述美国梦的故事.相反,这可能只是一篇没有那么枯燥的关于算法的文章.A星算法,这个在游戏寻路开发 ...

  10. c# 字符串连接使用“+”和string.format格式化两种方式

    参考文章:http://www.liangshunet.com/ca/201303/218815742.htm 字符串之间的连接常用的两种是:“+”连接.string.format格式化连接.Stri ...