How to remove page background for Jquery Mobile Dialog?

Question

The dialog itself only occupies about 10% of the page and I wanted to remove or turn the dialog's page background into transparent so that the previous page will still be visible.

This is the js that calls the dialog:

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

and this is the div

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

I tried using custom css but it doesn't seem to change anything

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

and this is how i declared the css and js

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

Please help. many thanks.

Solution 1

I have found this:

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

This is a jquery mobile plugin and it's what I exactly want. :)

Solution 2

The accepted answer suggests using a third party dialog for jQuery Mobile. If you want to use the existing inbuilt dialog, then the following will work:

My CSS order looks like this:

<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" />

My custom CSS (post theme and JQM mobile structure 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;
}

And JavaScript when page loads:

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

Source: Tom Clarkson

Solution 3

For jQuery >1.9, live() is removed. Thus you habe to modify the JavaScript that Junto has posted above to following:

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

Comments

[Feras Odeh]

this works for me after adding .ui-dialog {z-index: 3000;} to this solution. Thanks