Bootstrap模态框水平垂直居中与增加拖拽功能


Posted in Javascript onNovember 09, 2016

最近开发一个CMS系统使用上了Bootstrap,在开发一个添加某些选项时,打算弹出一个模态框,但是发现,模态框不会垂直居中到屏幕上,而是在屏幕上方,找了好多资料都没搞定,最终自己试出了一种JS的方法,同时还需要Bootstrap模态框可以拖动,但是发现默认的也不行,翻遍了网络找了出来。现在分享给大家:

原文地址:http://www.panshy.com/articles/201509/webdev-2524.html

以下为Bootstrap模态框拖拽功能的增加方法

$("#myModal").draggable({ 
handle: ".modal-header", 
cursor: 'move', 
refreshPositions: false 
});

handle: ".modal-header", 去除将可以整个模态框都可以拖动,其中modal-header代表拖动的DIV的CLASS或ID

以下为弹出Bootstrap模态框水平垂直居中的代码

/* center modal */ 
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); 
}); 
} 
$('#myModal').on('show.bs.modal', centerModals); 
$(window).on('resize', centerModals);

其中,$(window).on('resize', centerModals); 代表用户改变浏览器时的事件,可以不用,但是改变浏览器,模态框不会跟着变化。

以上的JS代码加到页面的最后即可

Bootstrap模态框HTML

<!-- 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">标题</h4> 
</div> 
<div style="padding:5px;"> 
<div class="modal-body" data-scrollbar="true" data-height="200" data-scrollcolor="#000">

模态框内容

</div> 
</div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 
</div> 
</div> 
</div> 
</div>

Bootstrap模态框水平垂直居中与增加拖拽功能

以上所述是小编给大家介绍的Bootstrap模态框水平垂直居中与增加拖拽功能,实现一个模拟后台数据登入的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
JavaScript函数详解
Feb 27 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 #Javascript
H5移动端图片压缩上传开发流程
Nov 09 #Javascript
微信小程序 网络API Websocket详解
Nov 09 #Javascript
微信小程序 网络API 上传、下载详解
Nov 09 #Javascript
微信小程序 网络API发起请求详解
Nov 09 #Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 #Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 #Javascript
You might like
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
php获取错误信息的方法
2015/07/17 PHP
php利用header函数下载各种文件
2016/08/24 PHP
js 操作select和option常用代码整理
2012/12/13 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
Python实现简易端口扫描器代码实例
2017/03/15 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Python os模块常用方法和属性总结
2020/02/20 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
思想政治教育专业个人求职信范文
2013/12/20 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
工商干部先进事迹
2014/05/14 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2014年班组工作总结
2014/11/20 职场文书
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle