Mit benutzerdefinierte Breite und Höhe, jQuery Mobile Dialog-center-Bildschirm

Den ich erstellt habe-app mit jQuery Mobile und brauchen, um ein Dialogfeld an, wenn die Schaltfläche geklickt wird. Das Dialogfeld sollte zentriert ausgerichtet wird der Bildschirm, wenn ich angegeben haben, die Breite und Höhe des Dialogs. Bitte prüfen Sie die aktuellen jsfiddle version.

Code wie folgt.

<div data-role="page" data-theme="a" id="page1"> 
    <button data-theme="a" id="submit-button-1">Open Dialog</button>
</div>

<div data-role="page" data-theme="a" id="page2"> 
    <div data-role="content"> 
        <p>This is popup</p>
    </div>
</div>


$('#submit-button-1').click(function() {
    $.mobile.changePage($('#page2'), 'pop', false, true); 
});




#page2 {
     width:150px;
     height:150px;
     border: #f00 solid 1px; 
     margin:20px 100px;
}

Änderte ich die margin: 20px auto; aber kein Glück.

Wissen müssen eine weitere Sache, Wenn ich Klicken Sie auf die Schaltfläche Dialogfeld erschien auf der Mitte des Bildschirms. Aber es lädt als separete Seite, ich meine Schaltfläche Seite entfernt, die durch Dialog. Wie um dies zu vermeiden.

InformationsquelleAutor Sameera Thilakasiri | 2011-11-01

  1. 1

    Versuchen, Sie zu nutzen "position: relative":

    margin:20px auto;
position: relative;
    Fast da, Muss noch etwas wissen, Wenn ich auf die Schaltfläche Dialogfeld angezeigt, in der Mitte des Bildschirms. Aber es lädt als separete Seite, ich meine Schaltfläche Seite entfernt, die durch Dialog. Wie um dies zu vermeiden.
    Wenn Sie mit changePage Sie genau das tun. Ändern Sie die Seite. Ich denke, man könnte "page2" als ein normales div-statt einer Seite. Das wäre allerdings die Elemente, die hinter dem popup anklickbar. Ich Update Ihrer Beispiel: jsfiddle.net/Naning/wGpsa/14
    Vielen Dank, es funktioniert.

    InformationsquelleAutor starikovs

Schreibe einen Kommentar