Boostrap模态窗口学习总结

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

1.什么是模态窗？

是这样一种效果：

二.作文

标题(包括标题和关闭按钮)

中间(主要内容)

底部(主要用于放置操作按钮)

html代码中的布局是：使用div容器元素，分别使用modal、modal-dialog和modal-cottage样式，而modal-content包含弹出的页眉、正文和页脚，分别使用三种样式：modal-header、modal-body和modal-footer，如下图所示：

第三，实现代码。

Style.modal {//这个样式作为背景容器，100%满屏，内容多的时候k可以用modal滚动。位置：固定；//固定布局top : 0；right : 0；//设置上、下、左、右为0，表示充满全屏bottom : 0；left : 0；z指数： 1050；//提升z-index以防止其他元素溢出display: none//overflow:默认情况下不显示隐藏；-WebKit-overflow-scrolling 3360 touch；//在移动设备上，触摸以移动outline : 0；//消除虚拟边框}。模态对话{位置：相对；//相对于Modal元素，使相对定位宽度：自动；//宽度自适应余量： 10px；//外部距离为10像素}。模态内容{主要处理弹出窗口的边框、边距、背景色和阴影。相对位置：//背景-color : # fff；-web kit-背景-clip:填充盒；//背景的裁剪区域设置为从填充区域到背景-clip:填充框；border: 1px固体# 999；border: 1px实心rgba(0，0，0， 2)；//透明度设置边框-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.42857143 px；//最小高度设置为padding: 15pxborder-bottom: 1px实心# e5e5e5//底部设置细线，与modal-body不同。}.模态头。close {//close button margin-top :-2px；}.模态标题{ margin : 0；线高： 1.42857143；//头部内部的标题样式}。模态体{//中间内容区位置：相对；padding: 15px}.底部设置模态页脚{//padd : 15px；text-align:右侧；//右对齐，通常是按钮边框-top: 1px实线# e5e5e5}/stylebody！-button data-toggle=' modal ' data-target=' # pop CSS ' class=' btnbtn-success '单击弹出的modal window/button-！-//触发器元素(使用声明性语法)//弹出窗口主要内容-！-//下面的id是js用法(使用声明式语法)//弹出窗口主要内容-按钮ID=' Dian Ji ' class=' btnbtn-success '点击弹出模态窗口/按钮！-弹出窗口的主要内容-div class=' modal' id=' dianjiji '！-第一部分-div class=' modal-dialog '！-第二部分-div class=' modal-content '！-第三部分，Main parts-div class=' modal-header ' Button type=' Button ' class=' close ' data-miss=' modal ' span aria-hidden=' true '/span span class=' Sr-only ' close/span/H2 class=' modal-title '登录系统/h2/divdiv class='modal-body'p弹出窗口中的具体内容，Hhajbh/p/div class=' modal-footer ' Button type=' Button ' id=' log in ' class=' btnbtn-success ' log//bootstrap-3 . 3 . 5/dist/js/jquery . min . js '/script script src=' http :/bootstrap-3 . 3 . 5/dist/js/bootstrap . min . js '/script script src=' http :/bootstrap-3 . 3 . 5/dist/js/modal . js '/script script $(function(){ $(' # Dian Ji ')。单击(function() {$('#dianjiji ')。情态(' show ')；});})

四个。在Js中使用：

(1)声明性语法。

Data-toggle，data-target，设置在触发器元素上，data-toggle的值必须是modal，dat-target的值是css选择器。

(2)javascript用法：

1)使用属性控制：如果background的布尔值为true，则单击背景(不包括弹出窗口本身)时，弹出窗口将被关闭；否则，反过来。

键盘布尔值为真，则当按下esc时，弹出窗口关闭，否则，反之亦然。$('#dianjiji ')。modal({backdrop:true，keyboard:false，show:true})2)使用参数控制：toggle $(“# my modal”)。模式(“切换”)，当被触发时，反弹窗口的状态。

显示$(“#我的模态”)。模态(“显示”)，当被触发时，弹出窗口隐藏$(“#我的模态”)。模态(“隐藏”)将被显示，当被触发时，它将被关闭。

3)使用方法控制：

当调用Show方法时，Show.bs.modal立即触发show . bs . modal。当调用Hide方法时，此事件会立即触发Hide.bs.modal。此事件触发方法$(“# my modal”)的使用。隐藏模式弹出后的on('方法名'，函数(e))。})关于Boostrap模态窗的学习总结，边肖会在这里给大家介绍，希望对大家有所帮助！