可以切换模态框(Modal)插件的隐藏内容:

  • 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。

通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:

<div>
<button id="a1" data-toggle="modal" data-target="#b1">开启</button>
<div class="modal fade" id="b1">
<br />
<button class="btn btn-primary" data-dismiss="modal">关闭</button>
</div>
</div>

bootstrap学习<三>打开模态窗体的更多相关文章

  1. BootStrap学习(6)_模态框

    一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootSt ...

  2. BootStrap学习(三)——重写首页之导航栏和轮播图

    1.按钮 1)帮助文档:http://v3.bootcss.com/css/#buttons 2).btn-lg..btn-sm..btn-xs可以设置按钮的不同尺寸 3).active类设置按钮的激 ...

  3. Bootstrap 学习笔记7 模态框插件

    网站弹出框使用: 基本使用: <!-- 模态框的声明 --> <div class="modal" id="myModal" tabindex ...

  4. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  5. bootstrap在iframe框架中实现由子页面在顶级页面打开模态框(modal)

    我需要完成的效果: 1.在顶级页面打开模态框,并且遮罩层也要再顶级页面 2.单击遮罩层部分,模态框不关闭 问题描述: 不知为什么,可能是bootstrap前端框架添加遮罩层的一些问题.通过子页面在顶级 ...

  6. Bootstrap学习5--bootstrap中的模态框(modal,弹出层)

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...

  7. PyQt5学习笔记-从主窗体打开一个子窗体

    PyQt5学习笔记-从主窗体打开一个子窗体 软件环境: Eric6+Python3.5+PyQt5 试验目标: 1.点击菜单项Open,打开一个子窗体 2.点击按钮Open,打开一个子窗体 主窗体设计 ...

  8. web开发如何使用高德地图API(三)点击热点打开信息窗体

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  9. bootstrap学习总结-js组件(四)

    这次我们来看下js组件的使用,本篇文章会有点长,希望大家可以耐心看,相信收获会有不少.不少园友加我好友,表示喜欢我写文字的风格,简单明了,这里,再次谢谢你们的支持.一方面,博主自身技术有限,写的东西都 ...

随机推荐

  1. XML 与 DataSet/DataTable 互相转换实例(C#)——转载

    // <summary>      /// XML形式的字符串.XML文江转换成DataSet.DataTable格式      /// </summary>      pub ...

  2. 报表控件NCReport教程:集成NCReport到Qt应用程序中

    NCReport是一款轻量级.快速.多平台.简单易用的基于Qt toolkit的C++编写的报表解决方案,目前主要包括报表渲染库和报表设计器GUI应用程序. 但是好多使用NCReport控件的朋友都不 ...

  3. Dinic算法模板

    详解:http://blog.csdn.net/wall_f/article/details/8207595 算法时间复杂度:O(E * V * V) #include <cstdio> ...

  4. [课程设计]Scrum 1.5 多鱼点餐系统开发进度(点餐页面框架修复及继续布置)

    Scrum 1.5 多鱼点餐系统开发进度(点餐页面框架修复及继续布置)  1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅 ...

  5. JavaScript高级应用(二)(转)

    1.组件是否安装 //组件是否安装 isComponentInstalled("{6B053A4B-A7EC-4D3D-4567-B8FF8A1A5739}", "com ...

  6. [问题2014S11] 复旦高等代数II(13级)每周一题(第十一教学周)

    [问题2014S11]  设 \(A,B\) 为 \(n\) 阶实对称阵, \(p(A),p(B),p(A+B)\) 分别为 \(A,B,A+B\) 的正惯性指数, 证明: \[p(A)+p(B)\g ...

  7. Cheatsheet: 2015 09.01 ~ 09.30

    Web A Guide to Vanilla Ajax Without jQuery Gulp for Beginners A Detailed Walkthrough of ASP.net MVC ...

  8. Linux sticky bit 目录权限 rwt权限

    [linux权限分为 user group others三组] 今天看到有个目录的权限是rwxrwxrwt 很惊讶这个t是什么,怎么不是x或者-呢?搜了下发现: 这个t代表是所谓的sticky bit ...

  9. [HIHO1062] 最近公共祖先·一(lca, 并查集, 二分, 神trick)

    题目链接:http://hihocoder.com/problemset/problem/1062 题意裸,有个trick,导致我当年做的时候一直在WA... 那就是出现这种没有出现在关系中,但是依然 ...

  10. 前端工程师的PS默认工作区

    右侧依次是信息.图层.历史记录,如下图: