Transparent background but not dialog

Transparent background but not dialog

Hi,

I'm very new to jquery and having been stumbling my way around it.  I'm doing simple things atm and am trying to get the background to appear transparent when a dialog is opened.  I found a code block that looked to be what I needed however I'm getting a funky side effect that I would like to avoid. 

The background is transparent instead of an white screen, great.  The results of the dialog search are correct, however the dialog background is also transparent which it shouldn't be.  See the attached image.

Below is the code I used:

css
  1. .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;
    }













Html

  1. <div data-role="dialog" id="searchpage">
          <div data-role="header">
            <h1>Search</h1>
          </div>
          <div data-role="fieldcontain" style="padding:10px;" data-theme="a">
            <select name="searchSelect" id="searchSelect" data-native-menu="false" data-iconpos="left" data-mini="true">
                <option value="1" selected="selected">Address</option>       
            </select><br />
              <br />
          <!--- Input box for searching for addresses --->
            <input data-mini="true" type="search" name="query" id="query"
                   value="" placeholder="Search for address"
                     style="-webkit-user-select: text !important;"
                   autocomplete="off"/>
          </div>
          <!--- UL for filling results of search --->
          <ul data-role="listview" data-inset="true" id="search_results"></ul>
    </div>
















jquery:

  1.  $(document).ready(function () {
  2.          $('div[data-role="dialog"]').on('pagebeforeshow', function (e, ui) {
  3.              ui.prevPage.addClass("ui-dialog-background ");
  4.          });
  5.          $('div[data-role="dialog"]').on('pagehide', function (e, ui) {
  6.              $(".ui-dialog-background ").removeClass("ui-dialog-background ");
  7.          });


Is it possible to get the dialog background to not be transparent?

thanks.