Boostrap模态窗口的学习小结

Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。

一．什么是模态窗口？

是这样一种效果哟：

二． 组成

头部（包括标题和关闭按钮）

中间（主要内容）

底部（主要是放置操作按钮）

对应在html代码中的布局是：使用div容器元素，分别使用modal,modal-dialog,modal-cotent样式，而在modal-content内包含弹窗的header,body,footer,分别使用三个样式：modal-header,modal-body,modal-footer，如下图：

三，实现代码

<style>
.modal {//该样式是做背景容器的，100%充满全屏，还有当内容很多时，k可以在modal里进行滚动操作
position: fixed;//固定布局的
top: 0;
right: 0; //设置上下左右都为0，表示充满全屏
bottom: 0;
left: 0;
z-index: 1050;//提升z-index，防止其他元素溢出
display: none;//默认不显示
overflow: hidden;
-webkit-overflow-scrolling: touch;//支持移动设备上，触摸进行移动
outline: 0;//消除虚边框
}
.modal-dialog {
position: relative;//相对与Modal元素，进行相对定位
width: auto;//宽度自适应
margin: 10px;//外边距10像素
}
.modal-content {主要对弹窗进行边框，边距，背景色，阴影的处理
position: relative;//
background-color: #fff;
-webkit-background-clip: padding-box;//背景的裁剪区域设置从padding区域向外
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);//透明度设置
border-radius: 6px;
outline: 0;//取消轮廓显示
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-header {//弹窗的头部设置
min-height: 16.42857143px;//最小高度设置
padding: 15px;
border-bottom: 1px solid #e5e5e5;//底部设细线，与modal-body区分
}
.modal-header .close {//关闭按钮
margin-top: -2px;
}
.modal-title {
margin: 0;
line-height: 1.42857143;//头部内部的标题样式
}
.modal-body {//中间内容区域
position: relative;
padding: 15px;
}
.modal-footer {//底部设置
padding: 15px;
text-align: right;//居右对齐，一般都是按钮
border-top: 1px solid #e5e5e5;
}
</style>
<body>
<!-- <button data-toggle="modal" data-target="#popucss" class="btn btn-success" >单击弹出模态窗口</button> --><!-- //触发元素（使用声明式语法）
//弹窗主要内容 --><!-- //下面写id的是js使用方法（使用声明式语法）
//弹窗主要内容 -->
<button id="dianji" class="btn btn-success">单击弹出模态窗口</button>
<!-- 弹窗主要内容 -->
<div class="modal" id="dianjiji"><!-- 第一部分 -->
<div class="modal-dialog"><!-- 第二部分 -->
<div class="modal-content"><!-- 第三部分，主要部分 -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span> <span class="sr-only">Close</span>
</button>
<h2 class="modal-title">登录系统 </h2>
</div>
<div class="modal-body">
<p>弹窗里的具体内容,hhh ajbh </p>
</div>
<div class="modal-footer">
<button type="button"
id="login" class="btn btn-success ">登录</button>
<button type="button"
id="login" class="btn btn-success ">取消</button>
</div>
</div>
</div>
</div>
<script src="./bootstrap-3.3.5/dist/js/jquery.min.js"></script>
<script src="./bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
<script src="./bootstrap-3.3.5/dist/js/modal.js"></script>
<script>
$(function() {
$("#dianji").click(function() {
$("#dianjiji").modal("show");
});
})

四。Js 中的使用：

（1）声明式语法

data-toggle,data-target,给触发元素上设置，data-toggle的值必须为modal ，dat-target的值是：css选择符

（2）javascript用法：

1）使用属性控制：backdrop 布尔值 值为true,则单击背景（不包括弹窗本身）时，关闭弹窗，否则，反之。

keyboard 布尔值 值为true,则按esc时，关闭弹窗，否则反之。
$("#dianjiji").modal({
backdrop:true,
keyboard:false,
show:true;
})

2）使用参数控制：toggle $(“#mymodal”).modal(“toggle”)，触发时，反弹窗口的状态，

Show $(“#mymodal”).modal(“show”),触发时，显示弹窗
Hide $(“#mymodal”).modal(“hide”),触发时，关闭

3）使用方法控制：

Show.bs.modal 在show方法调用时立即触发
Shown.bs.modal 该事件在模态弹窗完全显示给用户之后，触发
Hide.bs.modal 在hide方法调用时，立即触发
Hiden.bs.modal 该事件在模态弹窗隐藏之后触发
使用方法
$(“#mymodal”).on(‘方法名',function(e){
//处理代码。。。
})

关于Boostrap模态窗口的学习小结，小编就给大家介绍到这里，希望对大家有所帮助！

赞 (0)

相关推荐

  • 使用boost读取XML文件详细介绍

    boost读取XML文件 boost中提供了对配置文件读取的支持,它就是:property_tree. basic_ptree 是property_tree的核心基础.其接口像std::list.可以执行很多基本的元素操作,比如使用begin().end()等.     此外还加入了操作属性树的get().get_child().get_value().data()等额外的操作. basic_ptree有两个重要的内部定义self_type和value_type.self_type是basic_

  • Boostrap实现的登录界面实例代码

    Boostrap实现的登录界面实例代码

    Bootstrap它是一个开源的web开发前端框架. 这几天我看了下Bootstrap的官方文档.看到其中的Basic-form,突然想实现下登录界面.然后想了下实现的思路,于是就打开了桌面的H5 builder码起来.代码实现起来其实不难,但是碰到个问题,就是Bootstrap的布局控制好像用.col类难以实现居中显示,虽然可以用modal(模态框)实现弹出居中,但是我暂时不想用modal框.发现问题后,第一想法是自己再定义个css进行一个控制.但是又不知道行业内的大牛是不是只用Bootstr

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • C++之BOOST字符串查找示例

    本文实例讲述了C++中BOOST字符串查找的方法,分享给大家供大家参考.具体方法如下: BOOST  字符串查找示例 复制代码 代码如下: #include <string>  #include <iostream>  #include <algorithm>  #include <functional>  #include <boost/algorithm/string/case_conv.hpp>  #include <boost/al

  • C++之boost::array的用法

    本文实例讲述了C++之boost::array的用法,分享给大家供大家参考.具体如下: 复制代码 代码如下: #include <string>  #include <iostream>  #include <boost/array.hpp>  #include <algorithm>  using namespace std;  int main()  {      boost::array<int, 5> array_temp = {{12,

  • 浅析Boost智能指针:scoped_ptr shared_ptr weak_ptr

    一. scoped_ptrboost::scoped_ptr和std::auto_ptr非常类似,是一个简单的智能指针,它能够保证在离开作用域后对象被自动释放.下列代码演示了该指针的基本应用: 复制代码 代码如下: #include <string>#include <iostream>#include <boost/scoped_ptr.hpp> class implementation{public:    ~implementation() { std::cout

  • C++之Boost::array用法简介

    本文实例讲述了c++里支持静态数组的容器:boost.array.分享给大家供大家参考.具体分析如下: 很多C++程序员都认为boost.array很有可能出现在下一代标准库里.对于boost.array的用法有一个基本的了解是很有必要的. 1. 为什么我们需要固定大小的数组的容器 首先,固定大小的数组还是很常见的,虽然stl提供了vector,但是vector作为动态可增长的数组,比静态数组多了一点开销,这在一些人看来是无法忍受的.c++里也需要提供固定大小容量的数组容器,当然,性能可以和普通

  • 使用HTML5+Boostrap打造简单的音乐播放器

    使用HTML5+Boostrap打造简单的音乐播放器

    前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做完这个Demo也算是暂告一段落,接下来是jQuery的源码和Boostrap.js的源码,任务很艰巨呢,加油~在此就不整篇的贴代码了,如果感兴趣的小伙伴可以发消息给我,可以把代码传给你们~ 正文: 先上效果图 1.布局:Boostrap里的响应式和自适应布局是自然跑不掉的,container中嵌套row再分别嵌套aside和main(H5新

  • C++ boost 时间与日期处理详细介绍

    boost 时间与日期处理 导视: 类 特点 缺点 说明 timer 计时基类 不适合大跨度时间 适用大部分的普通计时 progress_timer 继承自timer 可以自动写入流中 只精确到0.01s 如果需要更精确,可派生个类,调用stream的precision设置 progress_display 图形化显示进度 只能输出到cout 如果还有其他输出则会干扰进度显示. 折中的办法是重新显示 pd.restart(size); pd+= pNum; date 日期结构,时间点 -- da

  • C++中Boost库裁剪与其应用详解

    前言 Boost 库涵盖的范围极广,有字符串和文本处理相关子库比如 format 库和 regexp 库,有容器相关子库比如 variant 库(和 Qt 的 QVariant 有得一拼),有迭代器子库比如 tokenizer 库(可以把字符进行 tokenize),还有算法.函数对象和高阶编程相关子库如functional 库.lambda 库和 signal 库,还有泛型编程.模板编程子库如 call traits.mpl,还有并发编程相关的 thread 库,等等等等. Boost 是如此

随机推荐