<!-- 触发器(button) -->
<button class="btn btn-xs btn-success" data-toggle="modal" data-target="#myModal">编辑</button>
<!-- 模态框(Modal) -->
<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><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

  

bootstrap常用模态框的更多相关文章

  1. bootstrap的模态框的使用

    bootstrap的模态框 如果只想单独使用模态框功能,可以单独引入modal.js,和bootstrap的css,在bootstrap的包中,可引入bootstrap.js. 用法 通过data属性 ...

  2. Bootstrap 3 模态框播放视频

    Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...

  3. Bootstrap 实例 - 模态框(Modal)插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. bootstrap的模态框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  6. Bootstrap中模态框多层嵌套时滚动条问题

    在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...

  7. 黄聪:bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

  8. layui实现类似于bootstrap的模态框功能

    以前习惯了bootstrap的模态框,突然换了layui,想的用layui实现类似于bootstrap的模态框功能. 用到了layui的layer模块,例如: <!DOCTYPE html> ...

  9. WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

    由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...

随机推荐

  1. linux命令权限

    linux-命令权限 1)   新建用户natasha,uid为1000,gid为555,备注信息为“master” 2)   修改natasha用户的家目录为/Natasha 3)   查看用户信息 ...

  2. css3之calc()

    初识calc() 在使用calc()之前,我也只是听说有这么一个东西,但在用过之后我才发现这个功能其实很实用. calc()其实就是英文calculate(计算)的缩写,它看起来像个函数吧? 其实不是 ...

  3. IceScrum敏捷开发工具的安装文档-官方最新版

    Welcome to the iceScrum iceScrum install guide. If you don’t want to manage your own iceScrum instal ...

  4. QUnit 学习笔记 使用说明(一)

    一.单元测试前言 什么是单元测试? 如果是新接触单元测试的童鞋,简要的解释:就是一个JS函数/功能/模块的测试. 单元测试的工具:这里介绍QUnit Qunit原本是jqury家的,不过现在已经独立了 ...

  5. XML方式实现Spring的AOP

    1.编写切面类 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 package com.fz.an ...

  6. Hibernate常见配置详细解释

      <!--标准的XML文件的起始行,version='1.0'表明XML的版本,encoding='gb2312'表明XML文件的编码方式--> <?xml version='1. ...

  7. 【转】Ubuntu16.04安装WPS

    下载安装下载WPS For Linux:http://community.wps.cn/download/ 直接下载:http://kdl.cc.ksosoft.com/wps-community/d ...

  8. wireshark的一些快捷键

    恢复原来的大小   ‘crtl’+‘=’  即按住crtl建和=键(backspace左边那个键) 缩小 ‘crtl’+‘-’ 即按住crtl建和-键(backspace左边第二个键) 放大 ‘crt ...

  9. 第23课 #error和#line使用分析

    #error的用法: 示例程序: #include <stdio.h> #ifndef __cplusplus #error This file should be processed w ...

  10. test20181223

    Written with StackEdit. T1 取石子(stone) Description 有\(n\)堆石子,第\(i\)堆有\(x_i\)个. \(Alice\)和\(Bob\)轮流取石子 ...