Question

我通过jquery mobile alpha 4显示对话框，其中ajax如下：

在成功回调中：

success:
$j('#wchkdiv').html(msg);
$j("#wchkdiv").dialog();
$.mobile.changePage($('#wchkdiv'), 'pop', false, true);

上面的代码会导致对话框在点击html页面中的某些文本（而不是锚标记）时很好地转换为其外观，javascript会绑定点击事件。

现在在对话框中，我的代码如下：

<form id="gform" name="gform" class="formbody" method="post">
<input class="btns" type="button" onclick="return wchkSubmit(event,'tryAgain');" 
     name="tryAgain" value="Try Again"/>
</form>

当单击“再试一次”按钮时，我必须通过javascript来处理这个问题，这应该使对话框关闭（以及其他需要做的事情），并且在显示对话框之前显示的内容页面现在再次显示。这意味着它不应该导致任何页面重新加载和对话框不应该是浏览历史记录的一部分。

如果你能告诉我如何让jquery移动对话框出现在html页面顶部的屏幕上，html页面内容变暗或某种透明效果，那将是另一个大的加分？目前Dialog占据了整个屏幕。

Answer 1

直播示例：http://jsfiddle.net/ReMZ6/4/

HTML

<div data-role="page" data-theme="c" id="page1"> 
    <div data-role="content"> 
        <p>This is Page 1</p>
        <button type="submit" data-theme="a" name="submit" value="submit-value" id="submit-button-1">Open Dialog</button>
    </div>
</div>

<div data-role="page" data-theme="a" id="page2"> 
    <div data-role="content"> 
        <p>This is Page 2</p>
        <button type="submit" data-theme="e" name="submit" value="submit-value" id="submit-button-2">Close Dialog</button>
    </div>
</div>

JS

$('#submit-button-1').click(function() {
    $.mobile.changePage($('#page2'), 'pop', false, true); 
});

$('#submit-button-2').click(function() {
    alert('Going back to Page 1');
    $.mobile.changePage($('#page1'), 'pop', false, true); 
});

Answer 2

最接近你正在寻找的东西可能是jtsage的 jquery-mobile-simpledialog

http://dev.jtsage.com/#/jQM-SimpleDialog/

HTML：

<p>You have entered: <span id="dialogoutput"></span></p>
<a href="#" id="dialoglink" data-role="button">Open Dialog</a>

JavaScript的：

$('#dialoglink').live('vclick', function() {
  $(this).simpledialog({
    'mode' : 'string',
    'prompt' : 'What do you say?',
    'buttons' : {
      'OK': {
        click: function () {
          $('#dialogoutput').text($('#dialoglink').attr('data-string'));
        }
      },
      'Cancel': {
        click: function () { return false; },
        icon: "delete",
        theme: "c"
      }
    }
  })
})

Answer 3

我发现$('.ui-dialog').dialog('close');可以通过JS关闭对话。

并且$.mobile.changePage('#pageID', {transition: 'pop', role: 'dialog'});显示POP对话框。

Answer 4

我不是肯定的我完全按照你想要的做法，但是，要通过javascript关闭对话框，你只需要打电话：

$j("#wchkdiv").dialog('close');

至于在同一个“页面”上弹出对话框，我猜你指的是jQM选择列表的行为？如果是这样，据我所知，这是不可能的 - 为此我实际上编写了我自己的对话版本，可以在这里找到演示：http://dev.jtsage.com/jQM-SimpleDialog/

如果我完全忽略了这一点，请告诉我，我会看看是否可以添加一些见解。

如何关闭和覆盖jQuery Mobile模式对话框？

4 个答案: