如何关闭和覆盖jQuery移动模态对话框?

I display dialog box via jquery mobile alpha 4 with ajax like:

我用ajax通过jquery mobile alpha 4显示对话框:

Within the succes callback:

在成功回调:

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

Above code causes the dialog to nicely transition into its appearance when some text in the html page is clicked on ( not anchor tag) to which javascript binds click event.

上面的代码使得当单击html页面中的某些文本(而不是锚标记)时，对话框会很好地转换为其外观，javascript将单击事件绑定到这些文本。

Now within the dialog I have code like:

在对话框中，我有如下代码:

<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>

When Try Again button is clicked, I must handle this via javascript which should make the dialog close (among other things it needs to do), and the content page that was showing before the dialog was shown, is now showing again. That means it should not cause any page reloading and dialog box should not be part of browsing history.

单击Try Again按钮时，我必须通过javascript来处理这个问题，它应该使对话框关闭(它还需要做其他事情)，并且显示对话框之前显示的内容页面现在再次显示。这意味着它不应该导致任何页面重载，对话框不应该成为浏览历史的一部分。

It would be another big plus if you can show me how I can make jquery mobile Dialog to appear in part of the screen overlaying on top of html page with the html page content dimmed or some kind of transparency effect? Currently the Dialog takes up the whole screen.

如果你能告诉我如何让jquery移动对话框出现在html页面顶部，html页面的内容变得模糊，或者是某种透明效果，这将是另一个大的好处。当前对话框占据整个屏幕。

4 个解决方案

#1

Live Example: http://jsfiddle.net/ReMZ6/4/

生活例子: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>

$('#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); 
});

#2

The closest thing to what you're looking for is probably jtsage's jquery-mobile-simpledialog

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

http://dev.jtsage.com/#/jQM-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"
      }
    }
  })
})

#3

I found $('.ui-dialog').dialog('close'); works to close a dialogue through a JS.

我发现$(' .ui-dialog ').dialog(“关闭”);通过JS结束对话。

And, $.mobile.changePage('#pageID', {transition: 'pop', role: 'dialog'}); to Display POP Dialog.

而且,.mobile美元。changePage('#pageID'， {transition: 'pop'， role: 'dialog'});显示弹出对话框。

#4

I'm not positive I totally follow what you are trying to do, but, to close the dialog via javascript, all you need do is call:

我不是很积极，我完全按照你的想法去做，但是，通过javascript关闭对话框，你需要做的就是调用:

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

As for making the dialog popup on the same "page", I am guessing you are referring to the behavior of the jQM select lists? If so, to the best of my knowledge, it isn't possible - to that end I actually wrote my own version of the dialog, the demo can be found here: http://dev.jtsage.com/jQM-SimpleDialog/

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

If I completely missed the point, please let me know and I'll see if I can add some insight.

如果我完全没有抓住要点，请让我知道，我看看能否补充一些见解。

#1