jquery-mobile - 如何制作非全屏的 jQuery Mobile 对话框？

Question

我想弹出一个非全屏对话框，即它“ float ”在打开它的页面上方。这是我正在尝试的:

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

即使我在 Dialog 的 div 上设置了边界，它仍然是全屏的。

Answer 1

这是我想出的(在贾斯珀的一些重要提示之后):

<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 是一个奖励:它显示了如何从代码中关闭对话框。

你可以在这里摆弄它:
http://jsfiddle.net/ghenne/Y5XVm/1/