Bootstrap对话框使用实例讲解


Posted in Javascript onSeptember 24, 2016

使用模态框的弹窗组件需要三层 div 容器元素

分别为 modal(模态声明层) dialog(窗口声明层) content(内容层)

在内容层里面,还有三层,分别为 header(头部)、 body(主体)、 footer(注脚) 

一个简单的对话框登陆/注册例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="./css/bootstrap.min.css">
 <script src="./js/jquery.min.js"></script>
 <script src="./js/bootstrap.min.js"></script>
 <style>
  .modal-dialog {
   width: 20%;
  }

  .modal-footer, .modal-header {
   text-align: center;
  }

  input {
   width: 80%;
  }

 </style>
</head>
<body>
 <!-- LOGIN MODULE -->
 <div id="loginModal" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal">
      <span>×</span>
     </button>
     <h4 class="modal-title">会员登录</h4>
    </div>
    <div class="modal-body">
     <label for="log_uname">
      <span>帐号:</span>
      <input id="log_uname" name="log_uname" type="text" placeholder="input your account">
     </label>
     <br>
     <label for="log_passwd">
      <span>密码:</span>
      <input id="log_passwd" name="log_passwd" type="password" placeholder="input your password">
     </label>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-primary">登录</button>
     <button type="button" class="btn btn-warning" data-dismiss="modal">退出</button>
    </div>
   </div>
  </div>
 </div>

 <!-- LOGIN MODULE -->
 <div id="registerModal" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal">
      <span>×</span>
     </button>
     <h4 class="modal-title">注册会员</h4>
    </div>
    <div class="modal-body">
     <label for="uname">
      <span>帐号:</span>
      <input id="reg_uname" name="reg_uname" type="text" placeholder="input your account">
     </label>
     <br>
     <label for="reg_passwd">
      <span>密码:</span>
      <input id="reg_passwd" name="reg_passwd" type="password" placeholder="input your password">
     </label>
     <label for="reg_confirm_passwd">
      <span>确认:</span>
      <input id="reg_confirm_passwd" name="reg_confirm_passwd" type="password" placeholder="confirm your password">
     </label>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-primary">注册</button>
     <button type="button" class="btn btn-warning" data-dismiss="modal">退出</button>
    </div>
   </div>
  </div>
 </div>

 <button class="btn btn-primary" data-toggle="modal" data-target="#loginModal">登陆</button>
 <button class="btn btn-warning" data-toggle="modal" data-target="#registerModal">注册</button>
</body>
</html>

对话框其他知识

jQuery方式声明对话框

$('#myModal').modal({
 show : true,
 backdrop : false,
 keyboard : false,
 remote : 'index.html',
});

jQuery方式显示对话框

$('#myBtn').on('click', function () {
 $('#myModal').modal('show');
});

对话框的事件

show.bs.modal  ==> 在show方法调用时立即触发

shown.bs.modal  ==> 在模态框完全显示出来并且CSS动画完成之后触发

hide.bs.modal ==> 在hide方法调用时 还未关闭隐藏时触发

hidden.bs.modal ==> 在模态框完全隐藏之后并且CSS动画完成之后触发

$('#myModal').on('show.bs.modal', function () {
 alert('show !');
});

边缘弹出框

<button class="btn btn-lg btn-danger" type="button" data-toggle="popover"
 title="弹出框" data-content="这是一个弹出框">点击弹出/隐藏弹出框</button>
<script>
 $('button').popover();
</script>

其他方法

$('button').popover('show'); //显示
$('button').popover('hide'); //隐藏
$('button').popover('toggle'); //反转显示和隐藏
$('button').popover('destroy'); //隐藏并销毁

事件

show.bs.popover ==> 在调用show方法时触发

shown.bs.popover ==> 在显示整个弹窗时触发

hide.bs.popover ===> 在调用hide方法时触发

hidden.bs.popover ==> 在完全关闭整个弹出时触发

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 #Javascript
angular.js之路由的选择方法
Sep 24 #Javascript
用js写的一个路由(简单实例)
Sep 24 #Javascript
简单的js表格操作
Sep 24 #Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 #Javascript
轻松实现js选项卡切换效果
Sep 24 #Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 #Javascript
You might like
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python温度转换实例分析
2018/01/17 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Python如何定义有可选参数的元类
2020/07/31 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
介绍一下MD5加密算法
2016/11/12 面试题
啤酒销售实习自我鉴定
2013/09/24 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
小学教师读书活动总结
2014/07/08 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
Python 正则模块详情
2021/11/02 Python
python游戏开发之pygame实现接球小游戏
2022/04/22 Python