页面效果：

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. python开发编译器

    引言 最近刚刚用python写完了一个解析protobuf文件的简单编译器,深感ply实现词法分析和语法分析的简洁方便.乘着余热未过,头脑清醒,记下一点总结和心得,方便各位pythoner参考使用. ...

  2. XStream将java对象转换为xml时，对象字段中的下划线“_”，转换后变成了两个的解决办法

            在前几天的一个项目中,由于数据库字段的命名原因 其中有两项:一项叫做"市场价格"一项叫做"商店价格" 为了便于区分,遂分别将其命名为market ...

  3. Android注解使用之注解编译android-apt如何切换到annotationProcessor

    前言: 自从EventBus 3.x发布之后其通过注解预编译的方式解决了之前通过反射机制所引起的性能效率问题,其中注解预编译所采用的的就是android-apt的方式,不过最近Apt工具的作者宣布了不 ...

  4. mybatis plugins实现项目【全局】读写分离

    在之前的文章中讲述过数据库主从同步和通过注解来为部分方法切换数据源实现读写分离 注解实现读写分离: http://www.cnblogs.com/xiaochangwei/p/4961807.html ...

  5. 在Asp.Net中操作PDF – iTextSharp - 使用表格

    使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并不会深入探讨表格,仅仅是提供一个使用iTextSharp生成表格的方法介绍 使用i ...

  6. 体验报告：微信小程序在安卓机和苹果机上的区别

    很多人可能会问:微信小程序和在微信里面浏览一个网页有什么区别? 首先,小程序的运行是全屏的,界面跟进入了一个APP很像,更为沉浸跟在微信里面访问h5不一样:其次,它的浏览体验更为稳定. 不过,这还不够 ...

  7. 敏捷软件开发VS传统软件工程

    敏捷软件开发:又称敏捷开发,是一种从1990年代开始逐渐引起广泛关注的一些新兴软件开发方法,是一种应对快速变化的需求的一种软件开发能力. 与传统软件工程相比,它们的具体名称.理念.过程.术语都不尽相同 ...

  8. mysql数据库主从同步

    环境: Mater:   CentOS7.1  5.5.52-MariaDB  192.168.108.133 Slave:   CentOS7.1  5.5.52-MariaDB  192.168. ...

  9. (转载) RESTful API 设计指南

    作者: 阮一峰 日期: 2014年5月22日 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制 ...

  10. 学习笔记：发现一个IE版本判断的好方法

    web开发就不得不面对浏览器兼容性问题,特别是IE的兼容问题.在前端代码中经常要处理一些兼容格式,为了解决这个问题网上找了找识别浏览器版本的方法.   常规js方法 找到一个方法,还不错,可以识别出各 ...