Bootstrap 模态框(Modal)插件代码解析

2024-12-21 08:50:40

Bootstrap 模态框（Modal）插件模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。下面通过代码给大家介绍bootstrap 模态框插件，先给大家展示下效果图：

页面效果：

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">密   码：</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">×</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">邮   箱：</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">密   码：</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: 0;
 font-size: 17px;
}
.form-horizontal .form-group {
 margin-right: 0;
 margin-left: 0;
}
.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)插件代码解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

使用bootstrap插件实现模态框效果

今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用. 一. bootstrap 的 js 插件的简单介绍 1.引入我们在使用 bootstrap 库时,引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件,这两种文件都集成了 bootstrap 的所有插件,区别在于 *.min.js 是压缩后的版本. 我们在使用 bootstrap 的
Bootstrap 模态框实例插件案例分析

好久没有发过自己的代码的状态了,今天编写代码感觉有力不从心了.不过慢慢的找回了感觉,正好朋友问了我一个问题,就是如何实现模态框.其实就是引用bootstrap插件来实现.下面通过本文给大家介绍下. Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件).页面中的模态框一般分为注册模态框.变更模态框.删除(信息提示
Bootstrap每天必学之模态框（Modal）插件

本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件. 更多关于Bootstrap模态框插件内容请点击专题<Bootstrap Modal使用教程>进行学习,希望大家喜欢,下面继续一．基本使用使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). //基本实例 &l
Bootstrap 模态框(Modal)插件代码解析

Bootstrap 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.下面通过代码给大家介绍bootstrap 模态框插件,先给大家展示下效果图: 页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my
Bootstrap模态框(modal)垂直居中的实例代码

Bootstrap官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着.最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去. 因为之前对Bootstrap也不是很熟悉,便开始b
bootstrap模态框远程示例代码分享

本文实例为大家分享了bootstrap模态框远程的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
angularJS模态框$modal实例代码

1.引入$modal模块如:angular.module('ModalCtrl',['$modal' ,'$scope' , function($modal ,$scope ){ }]); 2.执行调模态框函数 $scope.editModule = function(type, size, id) { $scope.id = id; var modalInstance = $modal.open({ templateUrl: 'tpl/weichat_modulebaseinfo.html
bootstrap模态框示例代码分享

本文实例为大家分享了bootstrap模态框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
Bootstrap模态框案例解析

一.模态框的正常点击出现,如添加功能 <td width="120px"> <button type="button class="btn btn-blue" style="width: 100px;" data-toggle="modal" data-target="#systemAdd">添加</button></td> <!-- 添加的模
Bootstrap模态框（Modal）实现过渡效果

可以切换模态框(Modal)插件的隐藏内容: 1.通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" rel="external nofollow" 来指定要切换的特定的模态框(带有 id="identifier") 2.通过 JavaScript:使
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码

模态框嵌套在开发中,遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框,并且通过事件触发第三个模态框:即模态框嵌套. 模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框,从而点击触发模态框不会乱掉. HTML代码如下:  <div class="modal fade" id="outermost" tabindex="-1" role="dialog" ari
Bootstrap模态框插入视频的实现代码

下面代码实现别忘了前提是要在bootstrap框架下使用一.效果点击模态框跳出自己已做好的MP4等格式视频二.Bootstrap代码 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">模态框</button> <div class=&quo

Bootstrap 模态框(Modal)插件代码解析

相关推荐

随机推荐