zoukankan      html  css  js  c++  java
  • Bootstrap模态框水平垂直居中与增加拖拽功能(转)

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

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

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

    复制内容到剪贴板
    1. $("#myModal").draggable({   
    2.     handle: ".modal-header",   
    3.     cursor: 'move',   
    4.     refreshPositions: false  
    5. });  

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

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

    复制内容到剪贴板
    1. /* center modal */  
    2. function centerModals() {   
    3.     $('#myModal').each(function(i) {   
    4.         var $clone = $(this).clone().css('display', 'block').appendTo('body'); var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
    5.         top = top > 0 ? top : 0;   
    6.         $clone.remove();   
    7.         $(this).find('.modal-content').css("margin-top", top);   
    8.     });   
    9. }   
    10. $('#myModal').on('show.bs.modal', centerModals);   
    11. $(window).on('resize', centerModals);  

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

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

    Bootstrap模态框HTML

    复制内容到剪贴板
    1. <!-- Modal -->  
    2. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
    3.   <div class="modal-dialog">  
    4.     <div class="modal-content">  
    5.       <div class="modal-header">  
    6.         <button type="button" class="close" data-dismiss="modal" aria-hidden="true"</button>  
    7.         <h4 class="modal-title" id="myModalLabel">标题</h4>  
    8.       </div>  
    9.       <div style="padding:5px;">  
    10.       <div class="modal-body" data-scrollbar="true" data-height="200" data-scrollcolor="#000">  
    11.   模态框内容
    12. </div>  
    13.       </div>  
    14.       <div class="modal-footer">  
    15.         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
    16.       </div>  
    17.     </div>  
    18.   </div>  
    19. </div>  

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

    附赠 淘宝省钱优惠内部券地址:www.9duoshou.com

  • 相关阅读:
    (转)PHP 的 __FILE__ 常量
    smarty半小时快速上手教程(转)
    Namespace declaration statement has to be the very first
    ThinkPhp3.2 无法加载模块:Index
    注意mysql中的编码格式和php中的编码格式一致
    MySQL数据库备份与恢复方法(转)
    phpmyadmin设置id自增(AUTO_INCREMENT)(转)
    (转)用eclipse创建一个j2ee的web工程后,左面projects窗口中的项目如何没有显示webRoot文件夹,除了src的文件夹,其他都不显示
    CentOS6.8 安装 Nginx
    Eclipse Java注释模板设置详解
  • 原文地址:https://www.cnblogs.com/doublegi/p/6557827.html
Copyright © 2011-2022 走看看