2012-09-03 6 views
16

Ich bin mit jQuery Mobile 1.2.0 alpha 1.Prevent JQuery Mobil von ein Popup zu schließen, wenn Benutzer außerhalb davon tippt

Zur Zeit, als ich ein Popup öffnen und das Popup außerhalb davon irgendwo auf dem Bildschirm tippen wird geschlossen. Ich frage mich, ob es irgendwelche JQuery Mobile-Attribute gibt, die ich verpasst habe, die eingestellt werden können und verhindern, dass das Popup nach außen geschlossen wird? (Modal Popup)

(Die Dokumentation für Popups here gefunden werden kann)

EDIT:

hatte ich eine Idee davon zu lösen, aber noch kann es nicht umsetzen arbeiten:

Wenn ein JQM-Popup angezeigt wird, gibt es ein div, das den gesamten Bildschirm mit der Klasse von ui-popup-screen abdeckt. Ich dachte irgendwie, es einen großen Z-Index zu geben und alle Click/tap-Funktion von ihm zu lösen. Das löst mein Problem nicht, aber ich denke, es ist ein kleiner Schritt in die Richtung.

Thnx im Voraus.

Antwort

24

Dies wurde als Feature-Anforderung auf Github hinzugefügt. Siehe Ausgabe here.

Als Hack für die Zwischenzeit ist es, die Ereignisse auf dem ui-Popup-Bildschirm zu lösen. Ich würde den folgenden Code in die Seiteneingabe einfügen.

$("#yourPopupId").on({ 
    popupbeforeposition: function() { 
     $('.ui-popup-screen').off(); 
    } 
}); 

Dies ist ein schwerer Hand Quickfix, aber es funktioniert.

+0

Funktioniert als Charme, danke. –

+0

Wissen Sie, wie ich es schaffen kann, dass der Hintergrund noch aktiviert ist? :) Ich kann es nicht ablehnen, aber ich kann auch nicht mehr mit dem Rest interagieren. – MJB

+0

@MJB Ich bin mir nicht sicher, was genau Sie erreichen wollen. Können Sie näher erläutern, mit was Sie noch interagieren möchten? – TheGwa

4

Aufbauend auf @ TheGwa ausgezeichnete Lösung ist hier eine Verallgemeinerung für die kommende offizielle Funktion vorzubereiten (vermutlich in der Version 1.3):

  • hinzufügen data-dismissible='false' zum Markup aller Pop-ups, die Sie nicht wollen, durch Abklopfen außerhalb von ihnen.

  • Fügen Sie Ihrer App den folgenden Ereignishandler hinzu. es wird alle Pop-ups Griff:

_

$(window).on('popupbeforeposition', 'div:jqmData(role="popup")', function() { 
     var notDismissible = $(this).jqmData('dismissible') === false; 
     if (notDismissible) { 
      $('.ui-popup-screen').off(); 
     } 
}); 

-

Sobald das Feature offiziell unterstützt wird, einfach den Event-Handler entfernen.

Beachten Sie, dass leider die offizielle Dokumentation (ab 1.2) deutet darauf hin, dass die Funktion bereits zur Verfügung steht, ist es aber nicht - http://jquerymobile.com/test/docs/pages/popup/options.html

19

Für zukünftige Forscher, wie 1.3 sehen, dies wird nun unterstützt. Fügen Sie einfach das Attribut data-dismissible="false" dem Panel div hinzu.

+0

Ich habe 1.7.13, aber das Hinzufügen dieses Attributs zu meinem div macht nichts. Wundern Sie sich, was ich tun könnte falsch? – BVernon

0

Fügen Sie data-disposiable = "false" wie folgt hinzu.

+1

Womit fügen wir es hinzu Könnten Sie bitte ein Beispiel zeigen? – Llewellyn1411

0

@ MJB -> Wenn Sie überall klicken können (z.Dieser arbeitete für mich

.ui-popup-screen{ 
        position: relative; 
       } 

: auf Knopfdruck), wenn ein Pop-up-aktiv ist, können Sie die CSS des Pop-up wie folgt ändern.

Hinweis: Pop-up schließen nicht mehr auf klicken, wenn Sie dies tun - ich eine Abhilfe gemacht: ist

$(window).click(function() {  
    if ($("#myPopup-popup").hasClass("ui-popup-active")){ 
     $("#myPopup").popup("close"); 
    } 
}); 

die myPopup-Popup-ID von JQM erzeugt - myPopup ist die ID Ich habe das Pop-up.

Verwandte Themen