专栏首页sktjbootstrap 模态框 弹出框

bootstrap 模态框 弹出框

手动切换模态框:

('#identifier').modal('show') 显示 $('#identifier').modal('hide') 隐藏

image.png

image.png

<h2>创建模态框(Modal)</h2> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框 </button> <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"> 模态框(Modal)标题 </h4> </div> <div class="modal-body"> 在这里添加一些文本 </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>

button.btn.btn-primary btn-lg data-toggle='modal' data-target='#myModal'

div.modal fade id='myModal' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">

使用模态窗口,您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。 如果您仔细查看上面的代码,您会发现在 <button> 标签中,data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。现在,很明显,您不能在同一时间加载多个模块,但您可以在页面上创建多个在不同时间进行加载。 在模态框中需要注意两点: 第一是 .modal,用来把 <div> 的内容识别为模态框。 第二是 .fade class。当模态框被切换时,它会引起内容淡入淡出。 aria-labelledby="myModalLabel",该属性引用模态框的标题。 属性 aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。 <div class="modal-header">,modal-header 是为模态窗口的头部定义样式的类。 class="close",close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式。 data-dismiss="modal",是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。 class="modal-body",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式。 class="modal-footer",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的底部设置样式。 data-toggle="modal",HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。


模态框事件

show.bs.modal 调用show时使用 shown.bs.modal 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。 hide.bs.modal 当调用 hide 实例方法时触发。 hidden.bs.modal 当模态框完全对用户隐藏时触发。

使用方法

<script>

('#myModal').modal('hide') }); </script> <script>

('#myModal').on('hide.bs.modal', function() { alert('嘿,我听说您喜欢模态框...'); }) }); </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • flask 模态弹出框(flask 64)

    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-ta...

    用户5760343
  • bootstrap bootstrap-modal.js 模态对话框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • bootstrap 模态弹出框 常用**

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • 前端之bootstrap模态框

      简介:模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。...

    互联网金融打杂
  • bootstrap的模态框

    ydymz
  • 66. Vue 结合webpack使用jquery以及boostrap

    有时候在 Vue 框架开发的时候,还是存在需要使用 jquery 以及 boostrap 的场景的,这个时候就需要安装 Jquery 以及 boostrap 了...

    Devops海洋的渔夫
  • Bootstrap 模态框(Modal)插件的基本应用

    通常用来显示一个单独的源内容或者是对一些模块进行进一步详细的介绍,可以在不离开父窗体的情况下进行一些互动和内容的交互。

    德顺
  • 宏基因组学习笔记2

    metagenomics, 在希腊语中meta意思是超越的。宏基因组研究的目的是通过对菌种(株)的鉴定,获得真实的多样性数据,功能,协作和进化。宏基因组分析的三...

    用户1075469
  • Django 2.1.7 模型 - MVT模型增删功能

    上一篇Django 2.1.7 模型类 - 字段类型讲述了关于模型字段类的内容,丰富了不少模型中的字段类型。

    Devops海洋的渔夫
  • ios中iframe的scroll滚动事件替代方法

    deepcc

扫码关注云+社区

领取腾讯云代金券