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 相关文章推荐
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
ArrayList类(增强版)
Apr 04 Javascript
javascript Excel操作知识点
Apr 24 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 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清除字符串中所有无用标签的方法
2014/12/01 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
客房服务员岗位职责
2015/02/09 职场文书
社区母亲节活动总结
2015/02/10 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
Java输出Hello World完美过程解析
2021/06/13 Java/Android
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers