2012-08-10 15 views
25

Przykładowy kod:Bootstrap: Jak zmienić menu rozwijane poza okno dialogowe w modalnym oknie dialogowym?

http://jsfiddle.net/vpg5g/

Chciałbym mieć menu, które spada z przycisku poszerzyć ponad granicami modalna jest. Jak widać, obecny stan nie nadaje się do użytku. Czy jest jakiś sposób, aby to osiągnąć?

+1

Dlaczego nie po prostu zrobić większy modalne okno dialogowe? –

+1

Liczba pozycji w rozwijanym menu jest dynamiczna, więc musiałbym obliczyć potrzebną przestrzeń. Jeśli to zrobię, mogę też napisać linki bezpośrednio do okna dialogowego, co nie jest tym, czego chcę. – flyx

Odpowiedz

27

modalna nie pozwala przelewał, można naprawić za pomocą:

.modal { overflow: visible; } 
.modal-body { overflow-y: visible; } 

Working demo

Możesz dodać klasę do stosowania tych przepisów wyłącznie czasowniki modalne, które naprawdę tego potrzebują, w przypadku, gdy ta poprawka tworzy błędy.

+1

Jeśli masz okna dialogowe zawierające treść, która normalnie powodowałaby przewijanie okna dialogowego (innymi słowy, przypływ treści), zawartość, która normalnie się przewijała, teraz przepełnia okno dialogowe. – villecoder

+0

@villecoder Być może będziesz musiał dostosować wysokość modalu w pewnym momencie i wywołać przewijanie okna zamiast przewijania wewnątrz modalu. – Sherbrow

+0

@Sherbrow jak wywołać przewijanie okna? –

3

Jeśli nie można usunąć overflow: auto można zrobić coś takiego

$('.drop-down-inside-modal').on('click' , '.dropdown-toggle', function(event){ 
     var self = $(this); 
     var selfHeight = $(this).parent().height(); 
     var selfWidth = $(this).parent().width(); 
     var selfOffset = $(self).offset(); 
     var selfOffsetRigth = $(document).width() - selfOffset.left - selfWidth; 
     var dropDown = self.parent().find('ul'); 
     $(dropDown).css({position:'fixed', top: selfOffset.top + selfHeight , left: 'auto', right: selfOffsetRigth , width: '160px'}); 
    }); 

    function fixDropdownPosition(){ 
     var openDropdownButton = $('.drop-down-inside-modal.open'); 
     if($(openDropdownButton).length){ 
      var selfHeight = $(openDropdownButton).height(); 
      var selfWidth = $(openDropdownButton).width(); 
      var openDropdownButtonOffset = $(openDropdownButton).offset(); 
      var openDropdownButtonOffsetRigth = $(document).width() - openDropdownButtonOffset.left - selfWidth; 
      var openDropdown = $(openDropdownButton).find('ul'); 
      $(openDropdown).css({position:'fixed', top: openDropdownButtonOffset.top + selfHeight , left: 'auto' , right: openDropdownButtonOffsetRigth, width: '160px'}); 
     }; 
    }; 

    $(".modal-body").unbind("scroll"); 
    $(".modal-body").scroll(function(){ 
     fixDropdownPosition(); 
    }); 

    $(window).resize(function() { 
     fixDropdownPosition(); 
    }); 
+0

Dzięki za przegraną! Cieszę się, że ktoś znajdzie do tego użytek =) – ppollono

+0

Jest to dość hackowe rozwiązanie i wymaga wielu napraw, aby można go było wykorzystać, ale ostatecznie to jedyne podejście, które dostało zadanie za nas. – minexew

+0

Wiem, że jest hacky! ale działa dobrze, prawdopodobnie mógłbym zaktualizować go na żywo. – ppollono

Powiązane problemy