如何關閉和覆蓋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模式對話框？

回答

相關問題