2012-09-03 15 views
16

używam jQuery Telefony 1.2.0 alpha 1.Prevent JQuery Komórka z zamknięciem okienka popup, gdy użytkownik kliknie poza nim

Obecnie, kiedy otworzy się okienko i dotknij poza nim w dowolnym miejscu na ekranie podręcznego jest zamknięty. Zastanawiam się, czy nie ma żadnego atrybutu JQuery Mobile, który przeoczyłem, który można ustawić i zapobiec zamykaniu wyskakującego okienka na zewnątrz? (Modalne popup)

(Dokumentacja dla pop-upów można znaleźć here)

EDIT:

miałem pomysł na rozwiązanie tego, ale nadal nie można wdrożyć go do pracy:

Gdy wyskakujące okno JQM pokazuje tam div, który obejmuje cały ekran z klasą wyskakującego okienka. Pomyślałem, że powinienem nadać mu duży indeks z i usunąć z niego wszystkie funkcje kliknięcia/kliknięcia. Zrobienie tego nie rozwiązuje mojego problemu, ale myślę, że to mały krok w tym kierunku.

Thnx z góry.

Odpowiedz

24

Zostało to dodane jako żądanie funkcji na Github. Zobacz numer here.

Hackowanie tego w międzyczasie polega na rozwiązaniu zdarzeń na ekranie ui-popup. Wstawiłbym poniższy kod do strony.

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

To jest ciężka, ręczna poprawka, ale działa.

+0

Działa jako urok, dziękuję. –

+0

Czy wiesz, jak mogę to zrobić, aby tło było nadal włączone? :) Nie mogę tego zlekceważyć, ale też nie mogę już wchodzić w interakcje z resztą. – MJB

+0

@MJB Nie jestem pewien, co dokładnie chcesz osiągnąć. Czy mógłbyś wyjaśnić, z czym nadal chcesz współpracować? – TheGwa

4

Opierając się na @ doskonałe rozwiązanie TheGwa, oto jest uogólnienie, aby przygotować się do nadchodzących oficjalnej funkcji (przypuszczalnie, w wersji 1.3):

  • Dodaj data-dismissible='false' do znaczników wszystkich pop-upów, które nie chcą być niedopuszczalnym, dotykając ich poza nimi.

  • Dodaj poniższą procedurę obsługi zdarzeń do swojej aplikacji; będzie obsługiwać wszystkie wyskakujące okienka:

_

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

-

Gdy funkcja jest oficjalnie obsługiwane, wystarczy usunąć obsługi zdarzeń.

Należy zauważyć, że, niestety, oficjalna dokumentacja (od 1.2) wskazuje, że funkcja jest już dostępna, ale nie jest - patrz http://jquerymobile.com/test/docs/pages/popup/options.html

19

dla przyszłych wyszukiwań, jak od 1,3, to jest teraz obsługiwane. Po prostu dodaj atrybut data-dismissible="false" do panelu div.

+0

Mam 1.7.13, ale dodanie tego atrybutu do mojego div nic nie robi. Zastanawiam się, co mogę robić źle? – BVernon

0

Dodaj dane - niedozwolone = "fałsz" w następujący sposób.

<div data-role="popup" id="popupnotification" data-overlay-theme="b" data-theme="c" data-position-to="window" style="max-width:600px;"> 
+1

Do czego to dodamy. Czy mógłbyś pokazać przykład – Llewellyn1411

0

@ MJB -> Jeśli chcesz mieć możliwość kliknięcia w dowolnym miejscu (np.na przycisku), gdy pop-up jest aktywny, można zmienić CSS z pop-up w następujący sposób:

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

Ten pracował dla mnie.

Uwaga: pop-up nie zamyka na kliknięcie już kiedy to zrobić - Zrobiłem Obejście:

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

identyfikator myPopup-popup jest generowany przez JQM - myPopup jest identyfikator Dałam wyskakujące okienko.