更新

Question

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

<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

这是我想出的（在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是一个奖励：它显示了如何从代码中关闭对话框。

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

Answer 2

您可以在对话框上强制宽度，如下所示：

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

注意我也删除了背景，因此对话框可以显示在另一页的顶部。唯一的问题是，当您导航到对话框时，另一页被隐藏，因此对话框显示在白色背景上。

以下是演示：http://jsfiddle.net/jasper/TTMLN/

这是您的起点，我认为创建自己的弹出窗口的最佳方法是手动显示/隐藏对话框，以便jQuery Mobile不会隐藏旧页面。

更新

您当然可以使用对话框作为弹出窗口，并使用少量自定义编码：

$(document).delegate('#dialog-link', 'click', function () {

    var $dialog = $('#dialog');
    if (!$dialog.hasClass('ui-dialog')) {
        $dialog.page();
    }
    $dialog.fadeIn(500);

    return false;
});

其中dialog-link是以弹出窗口打开对话框的链接的ID。

这是对CSS的轻微更新，以使模式水平居中：

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

这是一个演示：http://jsfiddle.net/jasper/TTMLN/1/

Answer 3

这是一个你可以使用的插件..这个插件也可以使用你自己的html进行自定义。

simpleDialogue plugin for jquery mobile

如何创建一个非全屏的jQuery Mobile对话框？

3 个答案:

更新