Android - Jquery Mobile - Buttons show through Alert Box

My app is written using HTML, Javascript, and Jquery Mobile.

On my HTML page I have an <a href> that calls a Javascript that opens a custom Alert box. I am using several Jquery Mobile elements on the page also, such as buttons and sliders. These elements are on top of my alert box when called.

Any idea how to make my alert box take complete focus when called?

Here is some code:

Index.html:

<a href="javascript:Alert()">Click Here</a>

<div id="AlertBox" class="alert" style="display:none" onClick="document.getElementById('AlertBox').style.display='none'">Message Here</div>

Javascript:

function DisplayAlert(id,left,top) {
document.ge开发者_运维问答tElementById(id).style.left=left+'px';
document.getElementById(id).style.top=top+'px';
document.getElementById(id).style.display='block';
}

function Alert() {
var something = false;
if(something) {
}
else {
   DisplayAlert('AlertBox',100,50);
   }
}

---

1) without jQuery Mobile - what you started above, here is a similar discussion:

jQuery: How can i create a simple overlay?

2) and also you can accomplish dialogs using just jQuery Mobile like so:

<a href="content.html" data-rel="dialog">Open dialog</a> 

Docs: http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/page-dialogs.html