Bootstrap的模态框无法弹出的问题
今天在使用Bootstrap官网所提供的模态框插件时候发现其中的 可选尺寸模态框 无法弹出
在模态框前使用过其他 Bootstrap的js插件,可以正常使用,说明所需依赖js文件已经正常引用
注意:jquery.min.js与bootstrap.min.js文件引入顺序不可颠倒,否则同样无法使用,遇到相同问题的可以先检查此处
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
可以排除js依赖问题,经过测试和对比官网其他源码发现:
向红框内class值添加
<div class="modal fade bs-example-modal-lg"
问题解决
该问题主要原因是:按钮是通过 data-target=".bs-example-modal-lg"这个属性来指向被绑定的模态框,但是模态框的类名中没有bs-example-modal-lg这个值,导致绑定失败,点击按钮模态框无法弹出
模态框插件并不是可以直接使用,需要通过 data 属性或 JavaScript 调用
通过 data 属性:
通过在一个起控制器作用的元素(例如:按钮)上添加 data-toggle="modal"
属性,或者 data-target="#foo"
属性,再或者 href="#foo"
属性,用于指向被控制的模态框。
eg:
<button data-toggle="modal" data-target="#btn">点击显示模态框</button>
通过给button按钮 data-toggle="modal"和data-target="#foo"
两个属性,以及给模态框一个和按钮的data-target属性值相同的id属性值 来指向被控制的模态框
通过 JavaScript 调用:
$('#btn').modal()
通过元素的 id myModal
调用模态框
Bootstrap的模态框无法弹出的问题的更多相关文章
- Html中模态框(弹出框)使用入门
作为html学习学习模态框需要二步: 效果图 第一步学习HTML中 div的弹出 ①触发按钮 <input class="btn btn-success" i ...
- fastadmin模态框(弹出框)
用法: 在html页面新建一个按钮用来触发事件 <a href="javascript:;" class="btn btn-success btn-add &quo ...
- Bootstrap.之模态框 显示在遮罩层后面
Bootstrap.之模态框 显示在遮罩层后面 问题描述: 在使用bootstrap模态框,弹出的窗口在遮罩层后面,见图: 解决方案: 保证模态框的代码,所在的上一级(父元素)是body标签,即可.例 ...
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
- bootstrap删除模态框弹出并询问是否删除【通用删除模态框】
普通的询问是否删除的对话框比较low,可以利用bootstrap的模态框代替普通的对话框来实现删除. 效果: 点删除的时候弹出模态框询问是否删除,点确认的时候将需要删除的ID传到后台进行删除. 过程 ...
- firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)
问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
- Bootstrap -- 插件: 提示工具、弹出框、 警告框消息
Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...
- ASP.NET MVC4中使用bootstrip模态框时弹不出的问题
最近发现使用在MVC中使用bootstrip的模态框时弹不出来,但单独建立一HTML文件时可以弹出,说明代码没有问题,经过多次测试发现,在MVC的cshtml文件中添加上以下语句就能正常 @{ Lay ...
- 重置 Bootstrap modal 模态框数据
利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,stackoverflow 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...
随机推荐
- C#多线程---Mutex类实现线程同步
一.例子 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 ...
- Spring详解(九)------事务管理
1.事务介绍 事务(Transaction),一般是指要做的或所做的事情.在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序执行单元(unit). 这里我们以取钱的例子来讲解:比如你去ATM ...
- (1)hadoop之----linux配置jdk环境
首先Linux中应有jdk包 运用flashFXP上传文件,xshell连接linux系统 我一般将文件放在个人目录下softwear目录 ,软件装在个人目录下app目录 cd software ...
- 梯度下降做做优化(batch gd、sgd、adagrad )
首先说明公式的写法 上标代表了一个样本,下标代表了一个维度: 然后梯度的维度是和定义域的维度是一样的大小: 1.batch gradient descent: 假设样本个数是m个,目标函数就是J(th ...
- mysql基础操作(三):数据约束
首先创建一个数据库 create database homework default character set utf8; use homework; 1.1 默认值约束(default) -- 数 ...
- Struts2之文件上传与下载
时间:2017-1-11 15:47 --使用commons-fileupload组件上传1.客户端 * method="post" * <input t ...
- Mysql索引最佳实践笔记0524
#mysql5.7 innodb默认存储引擎 一.关于索引二.最佳实践三.避坑实践 一.关于索引 1.索引的作用 -提高查询效率 -数据分组.排序 -避免回表查询 -优化聚集查询 -用于多表join关 ...
- Python中的socket编程
网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket 所谓socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序 ...
- win10画板超实用的快捷键
win10画板超实用的快捷键链接: Windows 7 画图中的快捷键 Windows中画图的快捷键 其中有windows默认的快捷键,关于画图工具加入到快捷工具也有详细的介绍.
- 前后端数据交互(四)——fetch 请求详解
fetch 是 XMLHttpRequest 的升级版,使用js脚本发出网络请求,但是与 XMLHttpRequest 不同的是,fetch 方式使用 Promise,相比 XMLHttpReques ...