Bootstrap-模态框 modal.js
参考网址:http://v3.bootcss.com/(能抄不写)
1、大模态框
图片效果图:
代码:(button的属性data-target对应的是具体模态框的class)
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
2、小模态框
图片效果图:
代码:
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
3、我们的模态框
图片效果图
代码:
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!--头部开始-->
<div class="modal-header">
<!--关闭按钮-->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!--标题-->
<h4 class="modal-title">Modal title</h4>
</div>
<!--头部结束-->
<!--内容开始-->
<div class="modal-body">
<p>One fine body…</p>
</div>
<!--内容结束-->
<!--底部开始-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<!--底部结束-->
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
4、禁止掉动画:如果你不需要模态框弹出时的动画效果(淡入淡出效果),删掉 .fade
类即可。
5、js手动切换、打开、关闭模态框
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
6、ps注意:
(1)不支持同时打开多个模态框;
(2)模态框的 HTML 代码放置的位置,也就是说,尽量作为 body 标签的直接子元素。
Bootstrap-模态框 modal.js的更多相关文章
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- Bootstrap模态框(modal)垂直居中
http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...
- 模态框 modal.js
模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集. 不支持模态框重叠 千万不要在一个模态框上重叠另一个模态框.要想同时支持多个模态框,需要自己写额外的代码来实现. 模态框的 ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭
在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCo ...
- Bootstrap模态框modal的高度和宽度设置
(1)高度 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会发生变化 如下图所示 ...
- bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法
bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...
- Bootstrap模态框(MVC)
BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...
- Bootstrap3模态框Modal垂直居中样式
1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...
- js控制Bootstrap 模态框(Modal)插件
js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html
随机推荐
- SelectList类的构造函数
SelectList类的构造函数 2016年05月23日 17:29:52 FrankyJson 阅读数 272 标签: MVC函数 更多 个人分类: MVC SelectList 构造函数 (I ...
- oracle根据一张表更新另外一张表
知道是两张表进行更新,之前作过mysql的,直接就写了: update a,b set a.code = b.code wehre a.id = b.id 然后就报错了,上网查了下知道oracle不能 ...
- Java Math.round()函数小结
Math类中提供了三个与取整有关的方法:ceil,floor,round,这些方法的作用于它们的英文名称的含义相对应,例如:ceil的英文意义是天花板,该方法就表示向上取整,Math.ceil(1 ...
- 使用JavaScript实现一个简单的编译器
在前端开发中也会或多或少接触到一些与编译相关的内容,常见的有 将ES6.7代码编译成ES5的代码 将SCSS.LESS代码转换成浏览器支持的CSS代码 通过uglifyjs.uglifycss等工具压 ...
- Project导入RedMine甘特图展示
前端时间因公司业务需要使用RedMine来管理项目进度. 但是使用其自带的csv导入工具无法完成导入. 而我是java开发,并不会所谓的ruby语言,自然无法在段时间内完成此导入功能的修改. so,经 ...
- DOM基础2——元素
1.造元素 document.createElement("标签名") 例:var div_new=document.createElement("div"); ...
- 安卓多个按钮使用一个OnClickListener
安卓studio 3.1 版本编译通过 一个按钮id为bt1 一个按钮Id为bt2 mainactivity 代码入下 package com.example.vmpdump.firstapp; im ...
- Java Break 与 Continue
章节 Java 基础 Java 简介 Java 环境搭建 Java 基本语法 Java 注释 Java 变量 Java 数据类型 Java 字符串 Java 类型转换 Java 运算符 Java 字符 ...
- JuJu团队11月28号工作汇报
JuJu团队11月28号工作汇报 JuJu Scrum 团队成员 今日工作 剩余任务 困难 于达 解决了数据接口的bug 生成generator形式, 并用熟悉Julia处理数据的方法 处理数据步 ...
- POJ 3393:Lucky and Good Months by Gregorian Calendar 年+星期 模拟
Lucky and Good Months by Gregorian Calendar Time Limit: 1000MS Memory Limit: 65536K Total Submissi ...