透明的JqueryMobile對話框

[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;
} 

[Script]
當Jquery的版本>1.9時，.live的寫法會被移除掉，所以要採用以下第二個寫法。

1.
$(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 ");
});
}); 

2.
$(function() {
$(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 ");
});
});
[HTML]
    

        

            
設備編號輸入失敗
        
        

            

                
請重新掃描或以手動輸入。
            
            OK
        
    

轉自 http://tqclarkson.com/2012/04/19/transparent-jquery-mobile-dialogs/