页面效果：

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. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  2. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  3. 使用 .NET WinForm 开发所见即所得的 IDE 开发环境，实现不写代码直接生成应用程序

    直接切入正题,这是我09年到11年左右业余时间编写的项目,最初的想法很简单,做一个能拖拖拽拽就直接生成应用程序的工具,不用写代码,把能想到的业务操作全部封装起来,通过配置的方式把这些业务操作组织起来运 ...

  4. 分治法求解最近对问题（c++）

    #include"stdafx.h" #include<iostream> #include<cmath> #define TRUE 1 #define F ...

  5. x:bind不支持样式文件 或 此Xaml文件必须又代码隐藏类才能使用{x:Bind} 解决办法

    这两天学习UWP开发,发现一个很有趣的问题,就是我题目中的描述的. 我习惯了在ResourceDictionary中写样式文件,但是发现用x:Bind时会有问题 如果是写在Style里,则提示 “x: ...

  6. python+uwsgi导致redis无法长链接引起性能下降问题记录

    今天在部署python代码到预生产环境时,web站老是出现redis链接未初始化,无法连接到服务的提示,比对了一下开发环境与测试环境代码,完全一致,然后就是查看各种日志,排查了半天也没有查明是什么原因 ...

  7. jquery.Callbacks的实现

    前言 本人是一个热爱前端的菜鸟,一直喜欢学习js原生,对于jq这种js库,比较喜欢理解他的实现,虽然自己能力有限,水平很低,但是勉勉强强也算是能够懂一点吧,对于jq源码解读系列,博客园里有很多,推荐大 ...

  8. PHP与API讲解（一）

    了解API: 在使用与创建自己的API之前我们需要先了解什么是API! API代表应用程序编程接口,而接口指的是一个特定的服务.一个应用程序或者其他程序的公共模块. 理解SOA(面向服务的架构):SO ...

  9. 玩转spring boot——开篇

    很久没写博客了,而这一转眼就是7年.这段时间并不是我没学习东西,而是园友们的技术提高的非常快,这反而让我不知道该写些什么.我做程序已经有十几年之久了,可以说是彻彻底底的“程序老炮”,至于技术怎么样?我 ...

  10. WebGIS项目中利用mysql控制点库进行千万条数据坐标转换时的分表分区优化方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 项目中有1000万条历史案卷,为某地方坐标系数据,我们的真实 ...