<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 模态框(Modal)插件</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/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="#my">
    开始演示模态框
</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="my" 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>

遇到一个问题,在一个页面中出现两个模态框,这是只要将data-target="#my"属性改变即可,当然也要改变模态框的id

Bootstrap 模态框(Modal)插件id冲突的更多相关文章

  1. Bootstrap 模态框(Modal)插件

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

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

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

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

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

  4. 禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭

    在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCo ...

  5. Bootstrap模态框modal的高度和宽度设置

    (1)高度 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会发生变化 如下图所示 ...

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

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

  7. Bootstrap模态框(modal)垂直居中

    http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...

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

    bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...

  9. Bootstrap模态框(MVC)

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

  10. Bootstrap3模态框Modal垂直居中样式

    1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. C# 因缺少CategoryName,而未能初始化 的解决办法

    群里一小伙伴在开发APP时遇到了问题,便截图提问 一.傻瓜式解决办法: 删除: ((System.ComponentModel.ISupportInitialize)(this.performance ...

  2. docker (2) 通用/镜像命令

    Docker 的常用命令: (1)Docker  help 命令: 可以查看有关docker的所有操作命令: (2)docker COMMAND -–help 查看docker 的某项命令的帮助文档 ...

  3. java--基本数据类型的转换(强制转换)

    强制类型的转换 规则: 1.执行算术运算时,低类型(短字节)可以转换为高类型(长字节):例如: int型转换成double型,char型转换成int型等等. 就是用强制类型来实现. 3.强制类型转换语 ...

  4. 多线程之Thread

    Thread类可以创建和控制线程,Thread类的构造函数重载为接受ThreadStart和ParameterizedThreadStart类型的委托参数. Thread类默认创建的是前台线程,所以我 ...

  5. Spring MVC(三)控制器获取页面请求参数以及将控制器数据传递给页面和实现重定向的方式

    首先做好环境配置 在mvc.xml里进行配置 1.开启组件扫描 2.开启基于mvc的标注 3.配置试图处理器 <?xml version="1.0" encoding=&qu ...

  6. 常见的网页图像格式有 ico、jpg、png、gif,说说他们各自的应用场景

    1.ico:一般作为网页的标题上面的图标出现,文件 favicon.ico一般存放在网站根目录 2.jpg:非常适合作为储存像素色彩丰富的图片.例如照片等等 3.png:分为 png-8 以及 png ...

  7. arcgis api 3.x for js 热力图优化篇-不依赖地图服务(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. vivo7.0以上系统如何无需Root激活Xposed框架的方法

    在较多公司的引流或者业务操作中,基本都需要使用安卓的黑高科技术Xposed框架,几天前我们公司购买了一批新的vivo7.0以上系统,基本都都是基于7.0以上版本,基本都不能够获取Root的su超级权限 ...

  9. MPP-编码示例

    了解MPP的基本功能后,接下来具体分析编码的代码.首先把编码的代码提取出来,方便以后的使用. 完整的编码代码如下,相比较给出的示例代码,做了一些改动,输入的指令全部去除,将函数入口改为利用OpenCV ...

  10. Git - git branch - 查看本地仓分支列表

    索引: 目录索引 参看代码 GitHub: git.txt 一.示例: git branch 二.说明: 该命令将列出本地所有存在分支, 包括 本地独有分支与远端在本地签出的分支, 但是没有签出的远端 ...