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

我显示通过jQuery Mobile的阿尔法4对话框，阿贾克斯这样的：如何关闭和覆盖jQuery Mobile模式对话框？

内更迭回调：

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 mobile Dialog出现在html页面顶部的屏幕上，并且HTML页面内容变暗或者某种透明效果？目前该对话框占据整个屏幕。

来源

2011-06-18 ace

活生生的例子：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); 
});

来源

2011-06-19 12:54:53

我没有读到原来的问题 - Phill在这里的答案实际上好多了，如果您告诉jQM在打开对话框时不要更改哈希值，那么确实需要使用changePage返回原始页面。请记住，当beta1（或者他们选择标记它的任何内容）出现时，changePage的这种语法将被折旧，并且它将在1.0版本发布之前被删除。 –

你的答案解决了我的问题的70％。我现在坚持的问题是，我单击对话框中的Try Again按钮，它将我正确地转到html页面，但是当我在html页面中再次单击某个单词时，对话框将转换为显示，但它看起来像带有表单的页面。 jQm无法将其设置为第二次和以后的对话框。我花了相当多的时间来尝试这么多事情来解决这个问题，但没有运气。 – ace

你可以发布多一点的代码？ –

我还不能肯定我完全遵循你正在尝试做的，但是，通过JavaScript关闭对话框，所有你需要做的就是调用：

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

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

如果我完全错过了这一点，请让我知道，我会看看我是否可以添加一些见解。

来源

2011-06-19 01:27:11

我累了$ j（“＃wchkdiv”）。dialog（'close'）;已经和它不工作。它具有点击浏览器后退按钮的效果。这将我带回到我的html页面之前的页面。例如，如果我在谷歌。com现在输入我的html页面的url，它会把我带回到goole.com，相当可怕。我返回错误或做其他事情取消点击，但没有任何区别。 – ace

thnak你的评论儿子菲尔的答案。非常有用。 – ace

最接近的事你要寻找的可能是jtsage的jQuery的移动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" 
     } 
    } 
    }) 
})

来源

2011-08-02 05:48:03 coudron

我发现$('.ui-dialog').dialog('close');致力于通过一个JS关闭对话。

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

来源

2013-01-04 10:57:44

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

回答

相关问题