这篇文章主要为大家详细介绍了Bootstrap对话框使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

使用模态框的弹窗组件需要三层 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" tabindex="-1">
  <div>
   <div>
    <div>
     <button type="button">
      <span>×</span>
     </button>
     <h4>会员登录</h4>
    </div>
    <div>
     <label for="log_uname">
      <span>帐号:</span>
      <input id="log_uname" name="log_uname" type="text">
     </label>
     <br>
     <label for="log_passwd">
      <span>密码:</span>
      <input id="log_passwd" name="log_passwd" type="password">
     </label>
    </div>
    <div>
     <button type="button">登录</button>
     <button type="button">退出</button>
    </div>
   </div>
  </div>
 </div>

 <!-- LOGIN MODULE -->
 <div id="registerModal" tabindex="-1">
  <div>
   <div>
    <div>
     <button type="button">
      <span>×</span>
     </button>
     <h4>注册会员</h4>
    </div>
    <div>
     <label for="uname">
      <span>帐号:</span>
      <input id="reg_uname" name="reg_uname" type="text">
     </label>
     <br>
     <label for="reg_passwd">
      <span>密码:</span>
      <input id="reg_passwd" name="reg_passwd" type="password">
     </label>
     <label for="reg_confirm_passwd">
      <span>确认:</span>
      <input id="reg_confirm_passwd" name="reg_confirm_passwd" type="password">
     </label>
    </div>
    <div>
     <button type="button">注册</button>
     <button type="button">退出</button>
    </div>
   </div>
  </div>
 </div>

 <button>登陆</button>
 <button>注册</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 type="button"
 title="弹出框">点击弹出/隐藏弹出框</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实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
破天荒!苹果要在Twitter直播新品发布会

破天荒!苹果要在Twitte

苹果多年来一直是采取直播来发布新产品,但是之前都是在
游戏化、心流与推荐算法到底厉害在哪里?

游戏化、心流与推荐算

Gamification这个概念在近年的产品领域是一个相当热门
新iPhone发布之前 iPhone 7是目前最常见的苹果机型

新iPhone发布之前 iPh

国外一家机构发布的数据显示,目前iPhone 7是最常见的iP
发布前的最后盘点:新iPhone的杀手锏究竟是什么?

发布前的最后盘点:新iP

“双卡双待好,生活一个号,工作一个号,生活工作两不误。”
爱笑的丁磊运气不会太差,那网易游戏呢?

爱笑的丁磊运气不会太

从某种意义上来说,丁磊后来在网络游戏上的成功也是一种
互联网听歌二十年

互联网听歌二十年

互联网如何改变我们听歌的方式。
最新文章
详解NodeJs开发微信公众号

详解NodeJs开发微信公

本篇文章给大家分享了NodeJs开发微信公众号的相关技术
详解webpack4多入口、多页面项目构建案例

详解webpack4多入口、

这篇文章主要介绍了详解webpack4多入口、多页面项目构
Vue仿支付宝支付功能

Vue仿支付宝支付功能

这篇文章主要介绍了Vue仿支付宝支付功能,非常不错,具有
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】

jquery ajaxfileuplod

点击一次上传, 当上传操作结束后才能操作界面,实现方式
JavaScript继承与多继承实例分析

JavaScript继承与多继

这篇文章主要介绍了JavaScript继承与多继承,结合实例
使用javascript做在线算法编程

使用javascript做在线

这篇文章主要介绍了使用javascript做在线算法编程的相