Как закрыть и наложить jQuery Mobile модальный диалог?

Question

Я отображаю диалоговое окно через jquery mobile alpha 4 с ajax вроде:

В обратном вызове succes:

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

Приведенный выше код заставляет диалоговое окно красиво переходить в его внешний вид при щелчке по некоторому тексту на html-странице (не привязанному тегу), к которому javascript привязывает событие click.

Теперь в диалоге у меня есть такой код:

<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-страницы, или какой-то эффект прозрачности? В настоящее время диалог занимает весь экран.

Answer 1

Live Пример: 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/

Если я полностью пропустилДык, пожалуйста, дайте мне знать, и я посмотрю, смогу ли я добавить некоторые идеи.