bootstrap弹出的模态框水平垂直居中的实现

学习javascript从入门到放弃！，这是第一篇随笔，经验不足，如有不当之处，还望指出。好了废话不多说直接切入正题吧

1.bootstrap默认的model写法：

//触发模态框的button
<button data-toggle="modal" data-target="#myModal"type="button"
class="btn btn-default" >button
</button>
//弹出的模态框内容
<div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header">                                                                                                                                   //关闭模态框<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><img src="/static/img/modal-close.png"/></span></button><h4 class="modal-title f24" id="mySmallModalLabel">支付</h4></div><div class="modal-body"></div></div></div>
</div>

//通过javascript调用，只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框：

$('#myModal').modal();

2.实现水平垂直居中

使用modal弹出事件方法。bootsrtap的模态框提供了一些事件用于监听并执行自己的代码。我们先看一下bootstrap提供的了哪些事件及基本用法；

从上面的图片中可以了解到bootstrap提供的这些事件应用的条件。我们的需求是:在触发modal显示的时候，modal出现在页面的水平垂直居中位置，那么show.bs.modal恰恰符合我们的需求。so，我们可以这样写

$('#myModal').on('show.bs.modal'，function(e){//设置模态框的水平垂直方向的位置；
});

里面的function(e){};可以拿出在单独定义一个function,这里命名为centerModals，

function centerModals() {   　　$('#myModal').each(function(i) {   var $clone = $(this).clone().css('display','block').appendTo('body');var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);top = top > 0 ? top : 0;   $clone.remove();   $(this).find('.modal-content').css("margin-top", top);   });
};

最后在show.bs.modal事件中调用centerModals函数：

$('#myModal').on('show.bs.modal', centerModals);
//禁用空白处点击关闭
$('#myModal').modal({
backdrop: 'static',
keyboard: false,//禁止键盘
show:false
});
//页面大小变化是仍然保证模态框水平垂直居中
$(window).on('resize', centerModals);

到此大功告成！，希望对帮助到大家。

如有不当之处，还望赐教。

共勉：　　

　　人生的路上没有地图，我们一路走一路在寻找，我们每个人心中都有梦想，但没有人知道抵达目的地的正确线路，所以我们在黑夜中摸索前行。

　　人生的路上没有地图，我们一路走一路被辜负，每一条寻梦的路上都充满荆棘和陷阱，每一个奋斗的人生都充满了挫折和辜负。但即使被打倒，也要站起来，掸掸身上的土，继续前行；即使被辜负，也要笑一笑，把它抛之脑后，接着上路。

　　因为人生没有地图，只要你勇敢走下去，就永远不会迷路！

转载于:https://www.cnblogs.com/web-wangmeng/p/5616174.html

bootstrap弹出的模态框水平垂直居中的实现相关推荐

html+js 弹出对话框(模态框)
<div id="modalBox"><dialog><button id="close">Χ</button> ...
第二百四十六节，Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件学习要点: 1.弹出框 2.警告框本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框弹出框即点击一个元素弹出一个包含标题和内容的 ...
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js)
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) 参考文章: (1)Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) (2)https://www. ...
学习使用Bootstrap弹出框Popover提示框样式
学习使用Bootstrap弹出框Popover提示框样式注意事项弹出方向失去焦点隐藏禁用元素弹出提示框 data属性详解 js方法与事件方法: 事件: 注意事项 popover提示框组件依赖 ...
Bootstrap 弹出框
一.Bootstrap 弹出框弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容. 注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 ...
弹出文件选择 html代码,HTML+CSS点击按钮弹出文件选择框的最佳方案
网页设计中,对于文件选择框(HTML的file标签),出于美观或者体验等等的原因,我们对他的默认外观并不满意,我们可能希望点击一个按钮直接弹出文件选择框,这个很多人认为很简单,但是由于浏览器兼容的原因 ...
弹出对话确认框插件confirmo.js
下载地址 confirmo.js是一款弹出对话确认框插件,简约的确认模态对话框组件,可以用来让用户确认之前执行一个动作.创建一个对话框confirmo.init({ yesBg: "gree ...
案例：文件下载需求：1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载||中文文件问题
文件下载需求: 1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载 * 分析: 1. 超链接指向的资源如果能够被浏览器解析,则在浏览器中展示 ...
Bootstrap 弹出提示插件Popover 的选项
选项 Bootstrap为工具提示插件提供了 8 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑5: 表 5‑5 popover插件的选项名称类型默认值 ...

bootstrap弹出的模态框水平垂直居中的实现

bootstrap弹出的模态框水平垂直居中的实现相关推荐

最新文章

热门文章