Ngăn chặn JQuery Mobile từ đóng một popup khi người dùng chạm bên ngoài của nó

Question

Tôi đang sử dụng JQuery Mobile 1.2.0 alpha 1.

Hiện nay, khi tôi mở một cửa sổ bật lên và bấm bên ngoài của nó bất cứ nơi nào trên màn hình popup đang bị đóng. Tôi đã tự hỏi nếu có bất kỳ thuộc tính JQuery Mobile nào tôi đã bỏ lỡ có thể được đặt và ngăn chặn đóng cửa sổ bật lên khi nhấn ngoài? (Sổ popup modal)

(Các tài liệu cho các quảng cáo có thể được tìm thấy here)

EDIT:

Tôi đã có một ý tưởng về giải quyết điều này, nhưng vẫn không thể thực hiện nó để làm việc:

Khi cửa sổ bật lên JQM hiển thị có một div bao phủ tất cả màn hình với lớp ui-popup-screen. Tôi nghĩ bằng cách nào đó để cung cấp cho nó một chỉ số z lớn và unbind tất cả các chức năng click/tap từ nó. Làm điều này không giải quyết được vấn đề của tôi nhưng tôi đoán đó là một bước nhỏ theo hướng.

Thnx trước.

Answer 1

Điều này đã được thêm làm yêu cầu tính năng trên Github. Xem vấn đề here.

Khi một hack cho điều này trong thời gian tạm thời là để unbind các sự kiện trên màn hình ui-popup. Tôi sẽ đặt đoạn mã sau trong pageinit.

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

Đây là một quickfix tay nặng, nhưng nó hoạt động.

Answer 2

Xây dựng trên @ giải pháp tuyệt vời TheGwa của, đây là một sự tổng quát để chuẩn bị cho các tính năng chính thức sắp tới (có lẽ, trong phiên bản 1.3):

• Thêm data-dismissible='false' để đánh dấu tất cả các quảng cáo mà bạn không muốn để được loại bỏ bằng cách khai thác bên ngoài của họ.

• Thêm trình xử lý sự kiện sau vào ứng dụng của bạn; nó sẽ xử lý tất cả các quảng cáo:

_

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

-

Một khi tính năng được hỗ trợ chính thức, chỉ cần loại bỏ các xử lý sự kiện.

Lưu ý rằng, thật đáng buồn, các tài liệu chính thức (tính đến 1.2) cho thấy tính năng này đã có sẵn, nhưng nó không phải là - xem http://jquerymobile.com/test/docs/pages/popup/options.html

Answer 3

Đối với người tìm kiếm tương lai, tính đến 1.3, điều này hiện nay được hỗ trợ. Chỉ cần thêm thuộc tính data-dismissible="false" vào bảng điều khiển div.

Answer 4

Thêm dữ liệu có thể loại bỏ = "sai" theo cách sau.

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

Answer 5

@ MJB -> Nếu bạn muốn có thể nhấp vào bất kỳ đâu (ví dụ:trên một nút) khi cửa sổ bật lên đang hoạt động, bạn có thể thay đổi CSS của cửa sổ bật lên như sau:

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

Điều này phù hợp với tôi.

Lưu ý: Pop-up không đóng trên nhấp chuột nữa khi bạn làm điều này - tôi đã thực hiện một cách giải quyết:

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

các myPopup-sổ popup ID được tạo ra bởi JQM - myPopup là ID Tôi đưa cửa sổ bật lên.