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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
javascript入门·对象属性方法大总结
Oct 01 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
浅析vue-router中params和query的区别
Dec 24 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+xslt在windows平台上
2006/10/09 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
js获取域名的方法
2015/01/27 Javascript
JavaScript File分段上传
2016/03/10 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
python备份文件的脚本
2008/08/11 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python实战购物车项目的实现参考
2019/02/20 Python
Python中按值来获取指定的键
2019/03/04 Python
python英语单词测试小程序代码实例
2019/09/09 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
转党组织关系介绍信
2014/01/08 职场文书
洗车工岗位职责
2014/03/15 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫