Bootstrap 模态框实例插件案例分析


Posted in Javascript onDecember 28, 2016

好久没有发过自己的代码的状态了,今天编写代码感觉有力不从心了。不过慢慢的找回了感觉,正好朋友问了我一个问题,就是如何实现模态框。其实就是引用bootstrap插件来实现。下面通过本文给大家介绍下。

           Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能。您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件)。页面中的模态框一般分为注册模态框、变更模态框、删除(信息提示)模态框三种基本模态框。

好了看代码。更希望大家互相关注,留下您的宝贵意见

Bootstrap 模态框实例插件案例分析

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>Bootstrap 实例 - 模态框(Modal)插件</title>
 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style>
 h4{
  text-align: center;
 }
   .c-right{
  width:100%;
  height:130px;
  border: 1px solid #fff;
  background-color: #fff;
 }
 .foot a{
  text-decoration-line: none;
 }
 .one {
 width: 65%;
 height: 40px;
 margin-top: 5px;
 margin-left: 35px;
 border-radius: 5px;
 color: #999;
 line-height: 40px;
 padding-left: 16px;
 border: 1px solid #e5e5e5;
}
 .two {
 width: 65%;
 height: 40px;
 margin-top: 5px;
 border-radius: 5px;
 margin-left: 35px;
 color: #999;
 line-height: 40px;
 padding-left: 16px;
 border: 1px solid #e5e5e5;
}
 .login_submit {
 width: 62%;
 height: 25px;
 color: #fff;
 background: #FB5C5A;
 border: 0;
 margin-left: 45px;
 outline: none;
 border-radius: 3px;
}
 .footer{
   width: 100%;
  height:80px;
  border: 1px solid #333333;
  background-color:#333333; 
  margin-left: 200px;
 }
 </style>
</head>
<body>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 开始
</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
     ×
    </button>
    <h4 class="modal-title" id="myModalLabel">
     网上辅导管理系统
    </h4>
   </div>
   <div class="modal-body">
    <div id="div2" class="div2 Absolute-Center">
    <div class="c-right">  
    <div class="middle">
     <p><input type="text"id="username" class="one"name="username"placeholder="username"></p>
     <p><input type="password"id="" class="two" name="password"placeholder="password"></p>  
    </div>
    <div class="foot">
     <p>
       <input type="submit" class="login_submit" id="btn2" value="登入"/>
     </p>
    </div>
    </div>
 </div>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
    </button>
    <button type="button" class="btn btn-primary">
     提交更改
    </button>
   </div>
  </div>
 </div>
</div>
</body>
</html>

以上所述是小编给大家介绍的Bootstrap 模态框实例插件案例分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
javascript回到顶部特效
Jul 30 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 #Javascript
Bootstrap中datetimepicker使用小结
Dec 28 #Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 #Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 #Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 #Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 #Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 #Javascript
You might like
php实现的验证码文件类实例
2015/06/18 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
python实现canny边缘检测
2020/09/14 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
年度考核自我鉴定
2013/11/09 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
公司经理任命书
2014/06/05 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
培训班开班主持词
2015/07/02 职场文书
机械生产实习心得体会
2016/01/22 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python