页面效果：

html+js：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>my love-用户登录</title>
  7.     <link rel="stylesheet" href="css/bootstrap.css">
  8.     <link rel="stylesheet" href="css/login.css">
  9.     <link rel="stylesheet" href="css/register.css">
  10.     <script src="js/jquery.js" type="text/javascript"></script>
  11.     <script src="js/modal.js" type="text/javascript"></script>
  12. </head>
  13.  
  14. <body>
  15.     <div class="main">
  16.         <form class="form-horizontal" action="index.html">
  17.             <div class="form-group">
  18.                 <label class="col-xs-3 col-md-3 control-label no-padding-right">用户名：</label>
  19.                 <div class="col-xs-7 col-md-7">
  20.                     <input type="text" class="form-control input-user-name" placeholder="请输入用户名......">
  21.                 </div>
  22.             </div>
  23.             <div class="form-group">
  24.                 <label class="col-xs-3 col-md-3 control-label no-padding-right">密&nbsp;&nbsp;&nbsp;码：</label>
  25.                 <div class="col-xs-7 col-md-7">
  26.                     <input type="password" class="form-control password-user-name" placeholder="请输入密码......">
  27.                 </div>
  28.             </div>
  29.             <div class="form-group bottom-button">
  30.                 <div class="col-xs-offset-4 col-xs-3 col-md-3">
  31.                     <button type="button" class="btn btn-success login-success-button">登录</button>
  32.                 </div>
  33.                 <div class="col-xs-3 col-md-3">
  34.                     <!-- Button register-modal -->
  35.                     <button type="button" class="btn btn-info" data-toggle="modal" data-target="#register-modal">注册</button>
  36.                 </div>
  37.             </div>
  38.         </form>
  39.         <!-- Modal -->
  40.         <div class="modal fade" id="register-modal" tabindex="-1" role="dialog" aria-labelledby="register-modal-label">
  41.             <div class="modal-dialog" role="document">
  42.                 <div class="modal-content">
  43.                     <div class="modal-header">
  44.                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  45.                         <h4 class="modal-title" id="register-modal-label">新用户注册：</h4>
  46.                     </div>
  47.                     <div class="modal-body">
  48.                         <div class="form-horizontal">
  49.                             <div class="form-group">
  50.                                 <label class="col-xs-3 col-md-3 control-label no-padding-right">邮&nbsp;&nbsp;&nbsp;箱：</label>
  51.                                 <div class="col-xs-7 col-md-7">
  52.                                     <input type="text" class="form-control">
  53.                                 </div>
  54.                             </div>
  55.                             <div class="form-group">
  56.                                 <label class="col-xs-3 col-md-3 control-label no-padding-right">用户名：</label>
  57.                                 <div class="col-xs-7 col-md-7">
  58.                                     <input type="text" class="form-control">
  59.                                 </div>
  60.                             </div>
  61.                             <div class="form-group">
  62.                                 <label class="col-xs-3 col-md-3 control-label no-padding-right">密&nbsp;&nbsp;&nbsp;码：</label>
  63.                                 <div class="col-xs-7 col-md-7">
  64.                                     <input type="password" class="form-control">
  65.                                 </div>
  66.                             </div>
  67.                             <div class="form-group">
  68.                                 <label class="col-xs-3 col-md-3 control-label no-padding-right">确认密码：</label>
  69.                                 <div class="col-xs-7 col-md-7">
  70.                                     <input type="password" class="form-control">
  71.                                 </div>
  72.                             </div>
  73.                         </div>
  74.                     </div>
  75.                     <div class="modal-footer">
  76.                         <button type="button" class="btn btn-info register-button">注册</button>
  77.                         <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.         </div>
  82.     </div>
  83.     <script type="text/javascript">
  84.         $(function() {
  85.             $('.register-button').click(function() {
  86.                 document.location.href = "login.html";
  87.             });
  88.         });
  89.     </script>
  90. </body>
  91.  
  92. </html>

login.css

  1. body {
  2.     background: url(../image/sun.jpg) no-repeat;
  3.     -moz-background-size: 100% 100%;
  4.     -webkit-background-size: 100% 100%;
  5. }
  6.  
  7. .main {
  8.     width: 365px;
  9.     height: 200px;
  10.     margin: 230px auto;
  11.     /*border: 2px solid #3a9c08;*/
  12. }
  13.  
  14. .form-horizontal {
  15.     padding-top: 30px
  16. }
  17. .main>.form-horizontal>.form-group>.col-xs-3.col-md-3.control-label.no-padding-right {
  18.   color: #fff;
  19. }
  20. label.control-label.no-padding-right {
  21.     padding-right:;
  22.     font-size: 17px;
  23. }
  24.  
  25. .form-horizontal .form-group {
  26.     margin-right:;
  27.     margin-left:;
  28. }
  29.  
  30. .form-group.bottom-button {
  31.     padding-top: 10px;
  32. }

register.css

  1. .modal-dialog .modal-content .modal-header {
  2.     background: url(../image/registerTop.png) no-repeat;
  3.     -moz-background-size: 100% 100%;
  4.     -webkit-background-size: 100% 100%;
  5. }
  6.  
  7. .modal-dialog .modal-content .modal-footer {
  8.     background-color: #d5feff;
  9. }

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. 2015 西雅图微软总部MVP峰会记录

    2015 西雅图微软总部MVP峰会记录 今年决定参加微软MVP全球峰会,在出发之前本人就已经写这篇博客,希望将本次会议原汁原味奉献给大家 因为这次是本人第一次写会议记录,写得不好的地方希望各位园友见谅 ...

  2. .NET Core中间件的注册和管道的构建（3） ---- 使用Map/MapWhen扩展方法

    .NET Core中间件的注册和管道的构建(3) ---- 使用Map/MapWhen扩展方法 0x00 为什么需要Map(MapWhen)扩展 如果业务逻辑比较简单的话,一条主管道就够了,确实用不到 ...

  3. node中的cmd规范

    你应该熟悉nodejs模块中的exports对象,你可以用它创建你的模块.例如:(假设这是rocker.js文件) exports.name = function() { console.log('M ...

  4. 一行代码实现java list去重

    1.不带类型写法: 1 List listWithoutDup = new ArrayList(new HashSet(listWithDup)); 2.带类型写法(以String类型为例):1)Ja ...

  5. iOS中支付宝集成

    iOS中支付宝集成 如今各种的App中都使用了三方支付的功能,现在将我在使用支付宝支付集成过程的心得分享一下,希望对大家都能有所帮助 要集成一个支付宝支付过程的环境,大致需要: 1>公司:先与支 ...

  6. Atitit.研发管理软件公司的软资产列表指南

    Atitit.研发管理软件公司的软资产列表指南 1. Isv模型下的软资产1 2. 实现层面implet1 3. 规范spec层1 4. 法则定律等val层的总结2 1. Isv模型下的软资产 Sof ...

  7. SpringMVC视图解析器

    SpringMVC视图解析器 前言 在前一篇博客中讲了SpringMVC的Controller控制器,在这篇博客中将接着介绍一下SpringMVC视 图解析器.当我们对SpringMVC控制的资源发起 ...

  8. 设置Hyper-V和VMware多个服务之间共存

    这个方法是解决多个服务之间不能共存,下面相当于是以Hyper-V和VMware做例子,其他的也适用. 今天准备安装VMware Workstation 10,然后玩玩MAC OS. 没想到,淡定的我双 ...

  9. Linux虚拟化学习笔记<一>

    关于虚拟化,原理的东西是非常复杂的,要想完全理解,没有足够的耐心是不不能完全学透这部分内容的.那下面我主要以资源汇总的形式把一些资料罗列出来,帮助大家快速理解虚拟化,快速使用和配置. 为什么要虚拟化: ...

  10. 2016年中国微信小程序专题研究报告

    2016年12月29日,全球领先的移动互联网第三方数据挖掘和分析机构iiMedia Research(艾媒咨询)权威首发<2016年中国微信小程序专题研究报告>. 报告显示,82.6%手机 ...