Wie center-modalen dialog in gescrolltem Fenster mit position absolute?

Ich versuche, die Mitte ein modales Dialogfeld im Fenster gescrollt. Diese modalen sind position absolute, da muss ziehbar Bildschirm. Ich benutze dieses plugin für draggable Funktion:

http://threedubmedia.com/code/event/drag

Mein problem ist, dass das modal hat position absolute, wenn ich top: 50% es zeigt sich modal in der Mitte angezeigt, aber nicht unter Berücksichtigung aller gescrolltem Fenster.

InformationsquelleAutor paganotti | 2012-09-25
  1. 13

    Sollten Sie verwenden 

    position:fixed

    statt absolute/relative.

    position:fixed wird Das element relativ positioniert, um das browser-Fenster.

    Verwenden Sie diese, und Sie sollten nicht irgendwelche Probleme durch zu scrollen.

    http://www.w3schools.com/cssref/pr_class_position.asp

    Sehen Sie diese Themen:

    Feste Positionierung ohne zu Scrollen

    Wie man ein div in der Mitte des Fensters nach dem scrollen

    • Ich Teste mit position: fixed, aber jquery draggable plugin funktioniert nicht.
    • Ich vermute, das ist, weil die css von seiner übergeordneten Elemente. Könnten Sie ein paar source-code oder der fiddle-Beispiel?
    • dies funktioniert nicht gut auf ios-safari. Auf scroll-Elemente hinter das modale werden "antipp" das ist nicht das beabsichtigte Verhalten des modals.
    InformationsquelleAutor gotqn
  2. 11

    Also dein dialog hat seine position absolut-und es ist ein unmittelbares Kind des Dokument - /Körper, richtig !?

    Zentrieren einer Aufforderung modal mit absoluter position:

    //Get the document offset :
var offset = $(document).scrollTop(),

//Get the window viewport height
viewportHeight = $(window).height(),

//cache your dialog element
   $myDialog = $('#MY_DIALOG');

//now set your dialog position
$myDialog.css('top',  (offset  + (viewportHeight/2)) - ($myDialog.outerHeight()/2));
    InformationsquelleAutor Stphane
  3. 1

    Wenn es ist in ein scrollbares div, stellen Sie sicher, dass , dass original-div ist: <div style="position:relative;">.

    So, ein div drin, dass ist absolute bleiben innerhalb der Grenzen, und die parent-relative-div-Element als Bezugspunkt für top:50%;

    InformationsquelleAutor Mark Pieszak - Trilon.io
  4. 1

    Im Allgemeinen, finden Sie die Mitte des Viewports mit scroll-Balken. Nehmen Sie Fenster-Höhe, geteilt durch 2, plus scroll top. Ergebnis ist die Anzahl der pixles, dass etwas ausgeglichen werden sollte aus dem Dokument oben.

    Wenn Ihr positionierte element ist ein Kind von mehr als einem scrollbaren element, dann müssen Sie die Verantwortung für diese, aber die grundlegende Mathematik ist die gleiche.

    Als seitliche Anmerkung, ein Beispiel für das markup, das Sie verwenden möchten, würden helfen, genauere Antworten.

    InformationsquelleAutor Rozwel
  5. 0

    versuchen gelöscht die option position 

    $dialog = $('<div><table width="100%" height="100%"><tr><td height="100%" align="center"><img style="vertical-align:middle"  src="css/images/ajax-loader.gif"></td></tr></table></div>')
        .html(msj)
        .dialog({
            title:"Validacion del ingreso.",
            width:350, 
            height:200, 
            modal:true,
            draggable:true,
            buttons: {
                                "Aceptar": function()
                                {
                                        $(this).dialog("close");
                                        $(this).dialog("destroy");

                                }
            }
        });
    InformationsquelleAutor KristKing
Schreibe einen Kommentar