Làm thế nào để loại bỏ nền trang cho Jquery Mobile Dialog?

Question

Hộp thoại chỉ chiếm khoảng 10% trang và tôi muốn xóa hoặc biến nền trang của hộp thoại thành trong suốt để trang trước đó vẫn hiển thị.

Đây là js mà các cuộc gọi thoại:

$.mobile.changePage('#popdiv',{transition:'slide', role:'dialog'}); 

và đây là div

<div data-role="page" id="popdiv" data-role="page" data-theme="e">   
    <div data-role="content"> 
    <h1>Congrats!</h1> 
    </div> 
</div> 

Tôi đã cố gắng sử dụng tùy chỉnh css nhưng nó dường như không thay đổi bất cứ điều gì

div#popdiv { 
    background: none; // i also used background-image and color and set it to none 
} 

và đây là cách tôi tuyên bố css và js

<custom css> 
<jquery mobile css> 
<jquery min.js> 
<phonegap.js> 
<custom.js> 
<jquerymobile.js> 

Vui lòng trợ giúp. cảm ơn nhiều.

Answer 1

Tôi đã thấy điều này:

https://github.com/jtsage/jquery-mobile-simpledialog

Đây là một plugin jquery di động và đó là những gì tôi muốn chính xác. :)

Answer 2

Chỉ cần thêm video này vào css của bạn

.ui-mobile [data-role="dialog"], .ui-page { 
display:block !important; 
} 

đó làm việc cho tôi.

Answer 3

Câu trả lời được chấp nhận đề xuất sử dụng hộp thoại của bên thứ ba bên thứ ba cho jQuery Mobile. Nếu bạn muốn sử dụng hiện có sẵn thoại, thì đây sẽ làm việc:

trật tự CSS của tôi trông như thế này:

<link rel="stylesheet" href="themeroller/mobile.min.css" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" /> 
<link rel="stylesheet" href="mobile-custom.min.css" /> 

tùy chỉnh CSS của tôi (bài chủ đề và JQM cấu trúc di động CSS):

.ui-dialog-background { 
    opacity: 0.5; 
    display: block !important; 
    -webkit-transition: opacity 0.5s ease-in; 
} 

.ui-dialog-background.pop.in { 
    opacity: 1; 
    -webkit-transition: opacity 0.5s ease-in; 
} 

.ui-dialog { 
    min-height: 100% !important; 
    background: transparent !important; 
} 

Và JavaScript khi tải trang:

$(function() { 
    $('div[data-role="dialog"]').live('pagebeforeshow', function(e, ui) { 
    ui.prevPage.addClass("ui-dialog-background "); 
    }); 

    $('div[data-role="dialog"]').live('pagehide', function(e, ui) { 
    $(".ui-dialog-background ").removeClass("ui-dialog-background "); 
    }); 
}); 

Nguồn: Tom Clarkson

Answer 4

Đối với jQuery> 1,9, live() bị xóa. Do đó, bạn có thể sửa đổi mã JavaScript mà Junto đã đăng ở trên để theo dõi:

$(document).on('pagebeforeshow', 'div[data-role="dialog"]', function (e, ui) { 
    ui.prevPage.addClass("ui-dialog-background "); 
}); 

$(document).on('pagehide', 'div[data-role="dialog"]', function (e, ui) { 
    $(".ui-dialog-background ").removeClass("ui-dialog-background "); 
});