透明的JqueryMobile對話框

透明的JqueryMobile對話框
--
原站:Transparent jQuery mobile dialogs
--

[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]
    <div data-role="dialog" id="errorDialog" class="ui-corner-all">
        <div data-role="header">
            <h1>設備編號輸入失敗</h1>
        </div>
        <div role="main" class="ui-content">
            <div style="text-align: center;">
                <p>請重新掃描或以手動輸入。</p>
            </div>
            <a href="#page1" data-transition="fade" class="ui-btn">OK</a>
        </div>
    </div>