jquery mobile simulate dialog box over div

Question

I've got a list view in my content area.

Looking to create a "overlay" over the listview to let the user know that we are looking for updates.

from my fetch controller I call:

$('#listview').addClass('loading');

But nothing happens.

page looks like:

<div data-role="content" id="content">
<ul data-role="listview" id="listview">
<% @places.each do |p| %>
  <li>
      <a href="#"><%= p.name %></a>
  </li>
<% end %>
</ul>   
</div>

CSS has:

#listview {
  position:relative;
}

.loading {
  position:absolute;
  top:0;
  left:0;
  background: rgba(0,0,0,0.5)
  width:100%;
  height:100%;
  z-index:1000;
}

Answer 1

What about using the jQuery mobile page loading message (the same one that shows when transitioning between pages)

You can show it using $.mobile.showPageLoadingMsg(); and hide it using $.mobile.hidePageLoadingMsg();

Here's the link to the relevant part of the jQuery mobile docs.

Answer 2

CSS mistake ?

backgournd
background