How can I make a jQuery Mobile dialog that is not full screen?

Question

I'd like to pop up a dialog that is not full screen, i.e., it "floats" above the page which opened it. Here is what I am trying:

<div data-role="page" id='Page1'>
  <div data-role='button' id="Button1">Open Dialog</div>
</div>

<div data-role="dialog" id='Dialog' 
    style='width:200px; height:100px; top:100px; left:100px;'>
  <div data-role='button' id="Button2">Close</div>
</div>

<script>

Button1.onclick = function() {
  //$.mobile.changePage($('#Dialog'))
  $.mobile.changePage('#Dialog',{role:'dialog'})
}

Button2.onclick = function() {
  $(".ui-dialog").dialog("close");
}

Even though I set the bounds on Dialog's div, it is still full screen.

Answer 1

Here's what I came up with (after some great hints from Jasper):

<div data-role="page" id='Page1'>
  <div data-role='button' id="Button1" >Open Dialog</div>
</div>

<div data-role="dialog" id='Dialog'>
  <div data-role='header'id='Dialog_header'><h1>Dialog</h1></div>
  <div data-role='button' id="Button2">Close</div>
</div>

<script>

Dialog_header.onclick= function(e){
    $("#Dialog").fadeOut(500);
}

Button1.onclick = function(e) {
  var $dialog=$("#Dialog");
  if (!$dialog.hasClass('ui-dialog')) 
    {$dialog.page()};
  $dialog.fadeIn(500);
}

Button2.onclick = function() {
  $("#Dialog").fadeOut(500);
}

Button2 is a bonus: it shows how to close the dialog from code.

You can fiddle with it here: http://jsfiddle.net/ghenne/Y5XVm/1/

Answer 2

You can force a width on the dialog like this:

.ui-mobile .ui-dialog {
    background : none !important;
    width      : 75% !important;
}​

Notice I also removed the background so the dialog can appear on top of the other page. The only problem that remains is that when you navigate to the dialog, the other page is hidden so the dialog appears on top of a white background.

Here is a demo: http://jsfiddle.net/jasper/TTMLN/

This is a starting point for you, I think the best way to create your own popup is to manually show/hide the dialog so jQuery Mobile doesn't hide the old page.

Update

You can certainly use a dialog as a popup with a small amount of custom coding:

$(document).delegate('#dialog-link', 'click', function () {
    
    var $dialog = $('#dialog');
    if (!$dialog.hasClass('ui-dialog')) {
        $dialog.page();
    }
    $dialog.fadeIn(500);
    
    return false;
});​

Where dialog-link is the ID of the link that opens the dialog as a popup.

Here is a slight update to the CSS to center the modal horizontally:

.ui-mobile .ui-dialog {
    background  : none !important;
    width       : 75% !important;
    left        : 50% !important;
    margin-left : -37.5% !important;
}​

And here is a demo: http://jsfiddle.net/jasper/TTMLN/1/