Bootstrap历练实例：模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体。通常，其目的是显示来自一个单独源的内容，可以在不离开父窗体的情况下进行一些交互，子窗体提供一些交互或信息。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：模态框(Modal)插件</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</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">
×
</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" aria-hidden="true">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div>
</div>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap历练实例：模态框(Modal)插件的更多相关文章
- Bootstrap 历练实例-轮播(carousel)插件的事件
事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...
- Bootstrap 历练实例-轮播(carousel)插件方法
方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...
- Bootstrap历练实例：按钮(Button)插件单个切换
单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 黄聪：bootstrap的模态框modal插件在苹果iOS Safari下光标偏离问题解决方案
一行CSS代码搞定: body.modal-open { position: fixed; width: 100%; }
- Bootstrap 实例 - 模态框（Modal）插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap 历练实例 - 按钮（Button）插件复选框
复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...
- Bootstrap历练实例：警告框(Alert)插件事件
事件 下表列出了警告框(Alert)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 close.bs.alert 当调用 close 实例方法时立即触发该事件. $('#myal ...
- Bootstrap历练实例：警告框(Alert)插件的方法
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- [UE4]用C++如何创建Box Collision
http://www.dawnarc.com/2016/08/ue4%E7%94%A8c--%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BAbox-collision/ 在蓝图 ...
- [Xcode 实际操作]七、文件与数据-(1)获取程序沙箱结构中常用的几个目录
目录:[Swift]Xcode实际操作 本文将演示如何获取程序沙箱结构中,常见的几个目录. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit ...
- 总结 Sublime Text 3 无法安装 Package Control 插件的解决办法
Sublime Text 是一款非常好用的轻便的编辑器,可以安装很多插件,实现IDE的很多功能,着实是程序员的利器. 我安装的 Sublime Text 3 Build 3143 ,软件汉化,软件激活 ...
- IT兄弟连 Java语法教程 Java语言的其他特性
Java语言中除了非常重要的跨平台特性外,还有如下几个关键特性: ● 语法简单易学 Java语言的语法简单明了,容易掌握,而且是纯面向对象(OOP)的语言,Java语言的简单性主要体现在以下几个方面 ...
- JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)
第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...
- ES6入门教程---变量和常量
ES6提出了两个新的声明变量的命令:let 和 const 1. 建议不再使用var,而使用let 和const .优先使用const. 在定义之后值是固定不变的,即为常量 常量的值不能修改,但是如果 ...
- Netty（4-1）factorial~总结
本节大纲: 1.Handler的执行顺序2.自定义二进制协议(每条完整数据的组成),从而解决拆包和粘包.3.通过为每个channel创建新的handler,从而解决即使handler中使用全局变量,也 ...
- Net Core微服务
Net Core微服务 http://www.cnblogs.com/qhbm/category/1235971.html 开发工具:VS2017 .Net Core 2.1 什么是微服务? 单体结构 ...
- NET Core 2.0 使用支付宝
ASP.NET Core 2.0 使用支付宝PC网站支付 前言 最近在使用ASP.NET Core来进行开发,刚好有个接入支付宝支付的需求,百度了一下没找到相关的资料,看了官方的SDK以及Demo ...
- js动态生成canvas
最近看代码发现一个小现象,就是用js动态生成的canvas在浏览器审查元素的时候,发现它没有结束标签,但是不会影响canvas上图形的绘制,同时还有一点就是在动态设置canvas宽度和高度的时候,不要 ...