<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 模态框（Modal）插件</title>

    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<h2>创建模态框（Modal）</h2>

<!-- 按钮触发模态框 -->

<button class="btn btn-primary btn-lg" 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">

                    &times;

                </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>

</body>

</html>
或者脚本控制

<script>

    $('#myModal').modal('toggle');

</scirpt>

原文：http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-modal

Bootstrap 实例 - 模态框（Modal）插件的更多相关文章

  1. 黄聪：bootstrap的模态框modal插件在苹果iOS Safari下光标偏离问题解决方案

    一行CSS代码搞定: body.modal-open { position: fixed; width: 100%; }

  2. Bootstrap历练实例：模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  3. Bootstrap使用模态框modal实现表单提交弹出框

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

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

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

  5. Bootstrap多层模态框modal嵌套问题

    一.问题 在项目里忽然新加了一个需求,在原本弹出的模态框里,点击模态框里面的按钮再弹出一个模态框,出来另个模态框来展示详细信息.此时就存在两个模态框在这个需求没加之前有一个弹出的模态框也是需要继续点击 ...

  6. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  7. bootstrap的模态框

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

  8. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  9. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

随机推荐

  1. 【原创】基于部署映像服务和管理（DISM）修改映象解决WIN7 USB3.0安装时报错

    本文作者为博客园阿梓喵http://www.cnblogs.com/c4isr/,转载请注明作者. 本文源地址:http://www.cnblogs.com/c4isr/p/3532362.html ...

  2. Bash的几个知识点

    1. 区别 builtin command, external command,bash script. 用builtin command(hash.type.command),而不是which命令( ...

  3. 通过内省机制设置JavaBean

    一.步骤: 1)使用PropertyDescriptor类获取属性描述者对象 //pd引用Student的name属性 PropertyDescriptor pd = new PropertyDesc ...

  4. VS2010编译Qt程序失败------error LNK1123: 转换到 COFF 期间失败:

    error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏使用VS2010编译VC++项目的时候可能会出这个问题. 据说升级到SP1后可能问题解决,但是下载量太大,目前没有得到证实. ...

  5. requirejs-define jquery 快速初学实例(一)

    原文地址:http://6yang.net/articles_view.php?id=1103 2011-10-18 13:12:01 by [6yang], 1029 visits, 收藏 | 返回 ...

  6. 栈和托管堆/值类型和引用类型/强制类型转换/装箱和拆箱[C#]

    原文地址:http://www.cnblogs.com/xy8.cn/articles/1227228.html 一.栈和托管堆      通用类型系统(CTS)区分两种基本类型:值类型和引用类型.它 ...

  7. 【C++模版之旅】静态多态的讨论

    说到面向对象特性之一“多态”,以我的水平已经说不出太多新意了.相信很多程序员代码K多了,做梦都在“多态中”运行着.常规的多态是C++语义内置支持的一种特性,通过虚函数可以实现这个特性,为了后面以示区别 ...

  8. 传阿里整合资源，进军O2O市场

    阿里巴巴对于本地生活市场,以及O2O领域始终虎视眈眈.从最早的融合口碑网,到最近阶段推出淘宝点点.收购高德地图等一系列app产品,其整合线上线下消费市场的野心已十分明显. 今年年初,阿里巴巴集团重新进 ...

  9. java如何从方法返回多个值

    本文介绍三个方法,使java方法返回多个值. 方法1:使用集合类 方法2:使用封装对象 方法3:使用引用传递 示例代码如下: import java.util.HashMap; import java ...

  10. APP常用模块

    2016年上半年 APICloud合作云服务商提供了各种类型模块多达45个 其中最新发布的重要模块有 美洽客服模块 亲加视频直播相关模块 保利威视视频播放器模块 苹果银联支付模块 贝宝支付模块 谷歌分 ...