Ustaw warstwę modalną na środku oglądanego ekranu

Question

Używam Twitter Bootstrap's modal, ale musiałem zmienić ich pozycję na absolutną, ponieważ potrzebuję ich, aby móc przewijać przyczynę małych ekranów. Niestety, dzięki temu modemy otwierają się na stałą pozycję strony, a nie na oglądany obszar. Czy istnieje sposób, aby je otworzyć (i móc przewinąć) do ekranu, który aktualnie przeglądam?

CSS:

.modal { 
    width: 845px; 
    margin: -250px 0 0 -430px; 
    background-color: #f6f5ed; 
    position: absolute; 
    border: 1px solid #cdc4b2; 
    top: 50%; 
    left: 50%; 
} 

Answer 1

Wątek: Modal plugin of Bootstrap 2 is not displayed by the center ma poprawną odpowiedź, pisał również tutaj:

$('#YourModal').modal().css(
      { 
       'margin-top': function() { 
        return window.pageYOffset-($(this).height()/2); 
       } 
      }); 

Answer 2

Zastosowanie pozycja "stałe" nie "absolutna".

Więcej szczegółów tutaj http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 3

Rozwiązanie z @steve nie działa dla mnie pomimo mojego problemu jest identyczna @ Stephanie.

Potwierdzając wątpliwości, że udział Stephanie i ja:

mam długie czasowniki modalne startowej. Na małych ekranach modałów nie można zobaczyć w całości bez przewijania. Domyślnie w modach bootstrap są ustawione: position. Mogę pozwolić im przewinąć, zmieniając to na pozycję: absolutną.

Ale teraz mam nowy problem. Moje strony też są długie i kiedy wystrzeliwam modal z na dole strony modalny pojawia się na stronie top poza bieżącym widokiem przeglądarki.

więc rozwiązać oba te:

css:

// allows the modal to be scrolled 
.modal {position: absolute;} 

JavaScript/jQuery:

// jumps browser window to the top when modal is fired 
$('body').on('show', '.modal', function(){ 
    $('body').scrollTop(0); 
}); 

Ale okazuje się, że Firefox nie lubi 'ciało' jako selektor dla scrollTop, ale działa jak "html". Webkit działa odwrotnie. Korzystanie komentarz stąd: Animate scrollTop not working in firefox

Ponieważ używam jQuery < 1,9 mogę zrobić przeglądarkę wąchania rozwiązać ten:

// jumps browser window to the top when modal is fired 
$('body').on('show', '.modal', function(){ 
    // Firefox wants 'html', others want 'body' 
    $(jQuery.browser.mozilla ? "html" : "body").scrollTop(0); 
}); 

Teraz gdy czasowniki modalne są wystrzeliwane są wyświetlane w górnej części strony, okno przeglądarki przewija się w górę, aby je odsłonić, ale użytkownik może nadal przewijać w dół, jeśli jego ekran jest zbyt mały, aby wyświetlić całą długość modalu.

Answer 4

Musiał przejść do pozycjonowania absolutnego, tak aby przewijał się na telefonach komórkowych.

ten pracował dla mnie, a także (roztwór przez AllInOne):

// jumps browser window to the top when modal is fired 
$('body').on('show', '.modal', function(){ 
    // Firefox wants 'html', others want 'body' 
    $(jQuery.browser.mozilla ? "html" : "body").scrollTop(0); 
}); 

Answer 5

Trochę późno do gry, ale to jest poprawka Obecnie mam na swoim miejscu i działa na Firefox, Chrome i IE.

$('body').on('show', '.modal', function() { 
$(this).css({ 'margin-top': window.pageYOffset - $(this).height()/2, 'top': '50%' }); 
$(this).css({ 'margin-left': window.pageXOffset - $(this).width()/2, 'left': '50%' }); 
}); 

Answer 6

Problemem jest CSS - Twój „ciało” & „html”, znaczniki są ustawione na „height: 100%”