Wie kann ich eine jQuery Mobile dialog, der nicht Vollbild?
Ich würde gerne ein pop-up-dialog, der nicht Vollbild, D. H., es "schwebt" über der Seite, die geöffnet. Hier ist, was ich versuche:
<div data-role="page" id='Page1'>
<div data-role='button' id="Button1">Open Dialog</div>
</div>
<div data-role="dialog" id='Dialog'
style='width:200px; height:100px; top:100px; left:100px;'>
<div data-role='button' id="Button2">Close</div>
</div>
<script>
Button1.onclick = function() {
//$.mobile.changePage($('#Dialog'))
$.mobile.changePage('#Dialog',{role:'dialog'})
}
Button2.onclick = function() {
$(".ui-dialog").dialog("close");
}
Obwohl ich die Grenzen-Dialog ist div, es ist immer noch Vollbild.
- Ich weiß, das ist geplant für das 1.2-release: filamentgroup.com/tests/popup/docs/pages/popup/index.html
- Davor hatte ich Angst!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier ist, was ich kam (nach ein paar tolle Tipps von Jasper):
Button2 ist ein bonus: es zeigt, wie das Dialogfenster zu schließen, die von code.
Können Sie die Geige mit ihm hier:
http://jsfiddle.net/ghenne/Y5XVm/1/
Können Sie erzwingen, dass eine Breite auf das Dialogfeld wie dieses:
Bemerken, dass ich auch entfernt den hintergrund, so dass das Dialogfeld kann angezeigt werden, auf der anderen Seite. Das einzige problem, das bleibt, ist, dass, wenn Sie navigieren Sie zu dem dialog, die andere Seite ist verborgen, so dass das Dialogfeld angezeigt wird, das oben auf einem weißen hintergrund.
Hier ist eine demo: http://jsfiddle.net/jasper/TTMLN/
Dies ist ein Ausgangspunkt für Sie, ich denke, der beste Weg, um erstellen Sie Ihre eigenen pop-up manuell ein - /ausblenden-dialog, so jQuery Mobile nicht verstecken, die alte Seite.
Update
Natürlich können Sie den dialog, der ein popup mit einer kleinen Menge von benutzerdefinierten Code:
Wo
dialog-link
ist die ID der Verknüpfung, öffnet sich der dialog als popup.Hier ist ein geringfügiges update der CSS zum zentrieren des modal horizontal:
Und hier ist eine demo: http://jsfiddle.net/jasper/TTMLN/1/
click
event-handler für die Schaltfläche "X".hier ist ein plugin, dass u können..das plugin ist auch anpassbar mit ur-eigenen html.
simpleDialogue plugin für jquery mobile