Question

Tôi muốn bật lên một hộp thoại không phải là toàn màn hình, tức là, nó "nổi" ở trên trang đã mở nó. Dưới đây là những gì tôi đang cố gắng:

<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"); 
} 

Mặc dù tôi đã đặt giới hạn trên div của Dialog, nó vẫn ở chế độ toàn màn hình.

Answer 1

Đây là những gì tôi đã đưa ra (sau khi một số gợi ý rất lớn từ Jasper) :

<div data-role="page" id='Page1'> 
    <div data-role='button' id="Button1" >Open Dialog</div> 
</div> 

<div data-role="dialog" id='Dialog'> 
    <div data-role='header'id='Dialog_header'><h1>Dialog</h1></div> 
    <div data-role='button' id="Button2">Close</div> 
</div> 

<script> 

Dialog_header.onclick= function(e){ 
    $("#Dialog").fadeOut(500); 
} 

Button1.onclick = function(e) { 
    var $dialog=$("#Dialog"); 
    if (!$dialog.hasClass('ui-dialog')) 
    {$dialog.page()}; 
    $dialog.fadeIn(500); 
} 

Button2.onclick = function() { 
    $("#Dialog").fadeOut(500); 
} 

Button2 là phần thưởng: nó cho thấy cách đóng hộp thoại từ mã.

Bạn có thể fiddle với nó ở đây: http://jsfiddle.net/ghenne/Y5XVm/1/

Answer 2

Bạn có thể buộc một chiều rộng trên hộp thoại như thế này:

.ui-mobile .ui-dialog { 
    background : none !important; 
    width  : 75% !important; 
}​ 

Thông báo tôi cũng loại bỏ nền để hộp thoại có thể xuất hiện trên đầu trang của các trang khác. Vấn đề duy nhất còn lại là khi bạn điều hướng đến hộp thoại, trang kia bị ẩn để hộp thoại xuất hiện trên nền trắng.

Đây là một bản demo: http://jsfiddle.net/jasper/TTMLN/

Đây là một điểm khởi đầu cho bạn, tôi nghĩ cách tốt nhất để tạo cửa sổ bật lên của riêng bạn là tự hiển thị/ẩn hộp thoại để jQuery Mobile không giấu trang cũ .

Cập nhật

Bạn chắc chắn có thể sử dụng một hộp thoại như một popup với một lượng nhỏ mã hóa tùy chỉnh:

$(document).delegate('#dialog-link', 'click', function() { 

    var $dialog = $('#dialog'); 
    if (!$dialog.hasClass('ui-dialog')) { 
     $dialog.page(); 
    } 
    $dialog.fadeIn(500); 

    return false; 
});​ 

đâu dialog-link là ID của liên kết mở ra hộp thoại như một popup.

Đây là một bản cập nhật nhỏ về CSS để tập trung các phương thức theo chiều ngang:

.ui-mobile .ui-dialog { 
    background : none !important; 
    width  : 75% !important; 
    left  : 50% !important; 
    margin-left : -37.5% !important; 
}​ 

Và đây là một bản demo: http://jsfiddle.net/jasper/TTMLN/1/

Answer 3

đây là một plugin mà u có thể use..this plugin cũng có thể tùy biến với html riêng ur.

simpleDialogue plugin for jquery mobile