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代码
Apr 01 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
express启用https使用小记
May 21 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python读写Json涉及到中文的处理方法
2016/09/12 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Python使用Pygame绘制时钟
2020/11/29 Python
python实现登录与注册系统
2020/11/30 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
应用心理学个人求职信范文
2013/12/11 职场文书
公司道歉信范文
2014/01/09 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
三好生演讲稿
2014/09/12 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
人力资源部岗位职责
2015/02/11 职场文书