Modale Ebene in die Mitte des betrachteten Bildschirms setzen

Question

Ich benutze Twitter Bootstrap's modal, aber ich musste ihre Position auf absolut ändern, weil ich sie brauche, um wegen der kleinen Bildschirme scrollen zu können. Leider öffnen sich damit die Modals zu einer festen Position der Site und nicht zu dem betrachteten Bereich. Gibt es eine Möglichkeit, sie zu öffnen und scrollen zu können, was ich gerade sehe?

CSS:

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

Answer 1

Dieser Thread: Modal plugin of Bootstrap 2 is not displayed by the center hat die richtige Antwort, geschrieben auch hier:

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

Answer 2

Verwenden Position "fixiert" nicht "absolut".

Weitere Details hier http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 3

Die Lösung von @Steve nicht trotz meiner Frage für mich arbeiten identisch zu @ Stephanie.

Neuformulierung das Problem, dass Stephanie und ich teile:

ich lange Bootstrap Modalverben haben. Auf kleinen Bildschirmen können die Modale nicht vollständig ohne Scrollen gesehen werden. Standardmäßig sind in Bootstrap Modals Position: fixed. Ich kann erlauben, dass sie gescrollt werden, indem ich diese Position ändere: absolut.

Aber jetzt habe ich ein neues Problem. Meine Seiten sind auch zu lang, und wenn ich das modale vom unteren der Seite feuere, erscheint das modale an der Oberseite der Seite, aus der gegenwärtigen Browseransicht heraus.

So beides zu beheben:

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); 
}); 

Aber es stellt sich heraus, dass Firefox nicht 'Körper' mag als Selektor für scrollTop, aber tut 'html'. Webkit funktioniert umgekehrt. Mit einem Kommentar von hier: Animate scrollTop not working in firefox

Da ich jQuery bin mit < 1.9 I Browser diese lösen Sniffing tun kann:

// 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); 
}); 

Jetzt, wenn die Modalverben abgefeuert werden sie an der Spitze der Seite erscheinen, die Das Browserfenster scrollt nach oben, um sie anzuzeigen, aber der Benutzer kann immer noch nach unten scrollen, wenn sein Bildschirm zu klein ist, um die gesamte Länge des Modals anzuzeigen.

Answer 4

Hatte auf absolute Positionierung zu ändern, so dass es auf Handys blättern würde.

Das funktionierte auch für mich (Lösung von 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

Ein bisschen, um das Spiel zu spät, aber das ist das Update ich zur Zeit an der richtigen Stelle und funktioniert auf Firefox, Chrome und Internet Explorer.

$('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

Das Problem ist, CSS - Ihr "Körper" & "HTML" Tags werden auf "height: 100%"