Hộp thoại tải theo chương trình trong jQuery Mobile?

Question

Tôi đang cố tạo hộp thoại trong jQuery Mobile xuất hiện khi bạn nhấp vào điểm đánh dấu trên Google Maps.

URL mẫu: http://cyclestreets.darkgreener.com/location/ (cuộn tới vị trí ở Luân Đôn, Vương quốc Anh để xem điểm đánh dấu).

Tôi đã có một phần của con đường đó, với mã này:

google.maps.event.addListener(map_marker, 'click', function() { 
    $.mobile.changePage({ url: $("#photo"), data: "id=" + marker.id, type: "GET"}, 'pop', false, true); 
}); 

Nhưng, một vài vấn đề để làm với phong cách và dữ liệu:

1. Các hộp thoại xuất hiện là full- màn. Có cách nào để tôi có thể hiển thị một phần màn hình, like the default jQuery Mobile dialogs và giống như hộp thoại Giới thiệu và Prefs on my home page không?
2. Không có liên kết đóng trong tiêu đề - một lần nữa, there is in the default jQuery mobile dialog. Tôi có thể đảm bảo điều này xuất hiện, không thể thêm nó bằng tay?
3. Trong sự kiện .live() của hộp thoại, làm cách nào tôi có thể nhận dữ liệu mà tôi đã chuyển đến?

Answer 1

Kể từ beta 1, để có được một div xuất hiện như một hộp thoại, sử dụng thuộc tính data-role="dialog" trên div thay vì data-role="page".

Answer 2

function openPopup(element_id) 
{ 
    $.mobile.changePage(element_id, { transition: "pop", role: "dialog", reverse: false }); 
} 

Answer 3

Xin lưu ý rằng hộp thoại jquery yêu cầu phải có nội dung vai trò dữ liệu và div tiêu đề để tạo kiểu được áp dụng phù hợp. Điều này sẽ cung cấp cho bạn hộp thoại đầy đủ với nút đóng trong tiêu đề.

<div data-role="dialog" id="dialog" > 
<div data-role="header"><h3>Oops!</h3></div> 
<div data-role="content"> 
    <p>You done screwed up, partner!</p> 
</div> 

</div>