zoukankan      html  css  js  c++  java
  • 黄聪: bootstrap 多模态框实现

    默认情况下,bootstrap模态框是不支持多个覆盖的,下面是一个解决办法(本人亲测),

    将下面的代码复制到当前需要多个模态框的页面,问题就可以解决

    $(document).on('show.bs.modal', '.modal', function(event) {
            $(this).appendTo($('body'));
        }).on('shown.bs.modal', '.modal.in', function(event) {
            setModalsAndBackdropsOrder();
        }).on('hidden.bs.modal', '.modal', function(event) {
            setModalsAndBackdropsOrder();
        });
    
    
        function setModalsAndBackdropsOrder() {  
            var modalZIndex = 1040;
            $('.modal.in').each(function(index) {
                var $modal = $(this);
                modalZIndex++;
                $modal.css('zIndex', modalZIndex);
                $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
            });
            $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
        }
    

      

  • 相关阅读:
    hdu 3033 I love sneakers!
    poj 1742 Coins
    poj 1276 Cash Machine
    hdu 1114 Piggy-Bank
    poj 1293 Duty Free Shop
    hdu 1203 I NEED A OFFER!
    hdu 2546 饭卡
    树的直径
    CF 337D Book of Evil
    ST表
  • 原文地址:https://www.cnblogs.com/huangcong/p/8635529.html
Copyright © 2011-2022 走看看