Jquery mobile 如何制作一个非全屏的jQuery移动对话框？

我想弹出一个不是全屏的对话框，也就是说，它“浮动”在打开它的页面上方。以下是我正在尝试的：

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

打开对话框
接近
Button1.onclick=函数（）{
//$.mobile.changePage（$（'#对话框'））
$.mobile.changePage（'#Dialog'，{role:'Dialog'}）
}
Button2.onclick=函数（）{
$（“.ui对话框”）.dialog（“关闭”）；
}

---

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

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

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

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

下面是一个演示：

这是一个起点，我认为创建自己的弹出窗口的最好方法是手动显示/隐藏对话框，这样jQuery Mobile就不会隐藏旧页面

更新 您当然可以将对话框用作带有少量自定义编码的弹出窗口：

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

其中，

对话框链接

是作为弹出窗口打开对话框的链接的ID

以下是CSS的一个轻微更新，以使模态水平居中：

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

---

这里有一个演示：

以下是我的想法（在Jasper给出了一些很好的提示之后）：

打开对话框
对话
接近
Dialog_header.onclick=函数（e）{
美元（“#对话”）。淡出（500）；
}
按钮1.onclick=功能（e）{
var$dialog=$（“#dialog”）；
if（！$dialog.hasClass（'ui-dialog'））
{$dialog.page（）}；
$dialog.fadeIn（500）；
}
Button2.onclick=函数（）{
美元（“#对话”）。淡出（500）；
}

按钮2是一个额外的功能：它显示如何从代码关闭对话框

你可以在这里摆弄它：

---

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

---

我知道这是计划在1.2版本中进行的：我需要使用changePage，而不是html=“#dialog”。当我这样做时，css中的背景设置似乎被忽略了。更严重的是，呼叫页面被隐藏。看来这需要等待Phill指出的增强。@ghenne我在回答中确实提到了这些问题，我希望你能设法解决。。。无论如何，请查看我答案的更新。更新后的代码创建了一个非常漂亮的弹出窗口。感谢您的提示-我学会了一些新技巧，并能够将它们应用到一个更简单的解决方案中。@Jasper它看起来像是“x”按钮试图回到历史中。你注意到关闭对话框的问题了吗？@TahoeWolverine我还没有在任何地方实现这段代码，但这听起来差不多是对的，因为这是该按钮的默认jQuery移动行为。您必须为“X”按钮设置

单击
事件处理程序。
<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);
}