bootstrap打開多個模式問題

我有這個問題，我需要打開多個模式。好的是，在我打開一個新的模式之前，現有的模式可以關閉。當一個模式打開通常我得到一個類適用於身體，稱爲「模式打開」它適用於溢出：隱藏身體。bootstrap打開多個模式問題

我創造了這個腳本：

var login = function() { 

    var handleRegister = function() { 

     $("a").click(function (e) { 
      var target = $(this).data("target"); 

      if (target) { 
       var visible = $(target).is(":visible"); 

       if (!visible) { 
        $('.modal').each(function() { 
         $(this).modal('hide'); // hide existing modals 
        }); 

        $(target).modal('show'); 
       } 

       e.preventDefault(); 
      } 
     }); 
    } 

    return { 
     init: function() { 
      handleRegister(); 
     } 
    } 
}();

正如你所看到的，我遍歷所有現有的模態，並關閉他們（我假定這將調用hidden.bs.modal並刪除模式開從身體類），並在這些運行後，我打電話顯示方法在我的目標。問題是模態開放類不適用於正文。

我嘗試在show call之後加入$（「body」）。addClass（「modal-open」），但不添加類。

有人遇到過這個嗎？

來源

2014-05-12 r3plica

我通過鉤住模態隱藏/顯示的事件來解決這個問題。我修改劇本是這樣的：

var login = function() { 

     var handleRegister = function() { 

      $("a, button").click(function (e) { 
       var target = $(this).data("target"); 
       var type = $(this).data("type"); 

       if (target && type) { 
        var visible = $(target).is(":visible"); 

        if (!visible) {      
         var available_height = $(window).height() - $('.topbar').outerHeight(); 
         var content = $('.modal-content', target); 
         content.height(available_height); 

         $('.modal').each(function() { 
          $(this).modal('hide'); // hide all existing modals 
         }); 

         $(target).modal('show'); 
        } 

        e.preventDefault(); 
       } 
      }); 

      $('.modal').on('hidden.bs.modal', function (e) { 
       $("body").removeClass("modal-open"); 
      }); 

      $('.modal').on('shown.bs.modal', function (e) { 
       $("body").addClass("modal-open"); 
      }); 
     } 

     return { 
      init: function() { 
       handleRegister(); 
      } 
     } 
    }();

我不清楚爲什麼這個工程，我會認爲這是將在模式腳本反正發生。但它有效，所以嘿嘿。

來源

2014-05-13 10:38:25 r3plica

這裏是我的解決方案：

之前，你打開你的第二個模式：

hasAlreadyModalOpen = $("BODY").hasClass("modal-open"); 
mySecondModal.modal("show"); 

mySecondModal.on('hidden.bs.modal', function (e) { 
    if (hasAlreadyModalOpen) { 
     $("body").addClass("modal-open"); 
    } 
});

來源

2015-02-19 17:24:42

一個很老的問題，但一個簡單的答案，因爲這是高的搜索結果，它仍然是一個問題。將附加的類添加到任何輔助模塊，例如然後掛鉤到他們的隱藏事件將簡單地減輕這一點。

$(document).on("hidden.bs.modal",".sub-modal.modal", function() { 
    $("body").addClass("modal-open"); 
});

來源

2016-12-11 08:02:37

bootstrap打開多個模式問題

回答

相關問題