这篇文章主要为大家详细介绍了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实战教程

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

最新资讯
张忠谋:老将二度离场

张忠谋:老将二度离场

56岁创业,78岁二度出山,有赞誉称他是台湾的“半导体教父
A站争夺战:为什么快手成了最后的赢家?

A站争夺战:为什么快手

对于中国互联网巨头而言,不断变大、占据战略地位,在多个
苹果CEO库克:中美贸易摩擦不会导致iPhone加税

苹果CEO库克:中美贸易

尽管外界对中美贸易摩擦的担忧日益升温,但苹果CEO库克
傅盛:与焦虑共生,更以焦虑反抗平庸

傅盛:与焦虑共生,更以焦

2008年,刚满30岁的傅盛离职,张颖看到这个消息,要来电话打
快手收购A站进军二次元,七亿老铁能容得下百万猴子吗?

快手收购A站进军二次

百万“猴子”终于有了新归宿,不是马云爸爸,不是“不站队
苹果WWDC大会发布了什么创新的功能?并没有

苹果WWDC大会发布了什

一场发布会的精彩程度,和演讲者说“isn't that cool”
最新文章
Angular2进阶之如何避免Dom误区

Angular2进阶之如何避

这篇文章主要介绍了Angular2进阶之如何避免Dom误区,小
使用FileReader API创建Vue文件阅读器组件

使用FileReader API创

这篇文章主要介绍了使用FileReader API创建一个Vue的
react 实现页面代码分割、按需加载的方法

react 实现页面代码分

本篇文章主要介绍了react 实现页面代码分割、按需加载
Vue项目分环境打包的实现步骤

Vue项目分环境打包的

这篇文章主要介绍了Vue项目如何分环境打包,实现方法大
vue 组件中slot插口的具体用法

vue 组件中slot插口的

这篇文章主要介绍了vue 中slot 的具体用法,包括子组件
JS遍历DOM文档树的方法实例详解

JS遍历DOM文档树的方

这篇文章主要介绍了JS遍历DOM文档树的方法,结合实例形