JQuery UI диалог не открывается во второй раз - PullRequest
Новая
       9

JQuery UI диалог не открывается во второй раз

7 голосов
/ 02 января 2012

Я использую jqueryui для диалогового окна.Нажав на ссылку «Нажмите для модального» в первый раз работает.При нажатии клавиши ESC диалоговое окно исчезает.Но щелчки после этого не работают.Я хочу, чтобы они тоже работали.При обновлении страницы все в порядке.

HTML: 

<a href="" class="click_me" style="font-size:15px;"> Click for a modal</a><br />

<div class="demo" ">

<div id="dialog" title="&nbsp;&nbsp;&nbsp;Upload Your Profile Picture" style="border1111:1px solid red; width:640px;">

       this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is   


</div><!-- end of id dialog -->
</div><!-- End demo -->

Фрагмент jQuery: 

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>   
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<script  type="text/javascript">

$(document).ready(function () {

    $(".click_me").bind('click', function (e) {
        e.preventDefault();
        $("#dialog").css('border', '5px solid #848484');
        $("#dialog").dialog({
            width: 460
        });
        //$( "#dialog" ).dialog( "option", "height", 180 );
    });

    $("body").bind("keyup#dialog", function (event) {
        // 27 == "esc"
        if (event.which == 27) {
            // TODO: close the dialog
            // unbind the event
            $("body").unbind("keyup.myDialog");
        }
    });

});
</script>

Как заставить работать несколько щелчков?

Ответы [ 3 ]

19 голосов
/ 02 января 2012

Четыре вещи.

Во-первых, если диалоговое окно должно использоваться повторно, вам нужно будет создать его до первого щелчка и установить для параметра autoOpen значение false. Чтобы открыть диалоговое окно, вы должны использовать dialog('open').

Например: 

$(document).ready(function () {

    var dialog = $('#dialog');

    dialog.dialog({              // <-- create the dialog
        width:    460,
        autoOpen: false
    });

    $(".click_me").bind('click', function (e) {
        e.preventDefault();
        dialog.dialog('open');   // <-- open the dialog
    });
});

Обратите внимание, что я создаю var dialog для сохранения $('#dialog'). Это более эффективно, потому что в противном случае jQuery должен будет искать #dialog несколько раз в одном фрагменте кода.

Во-вторых, у вас есть ошибка в вашем HTML: здесь слишком много цитат: 

<div class="demo" ">

Это может вызвать неожиданное поведение в некоторых браузерах (но не во всех), что затрудняет отладку. Удалить лишнюю цитату.

В-третьих, если я правильно помню, диалоговое окно jQuery UI уже обрабатывает клавишу ESC, поэтому вам не нужно делать это самостоятельно. Если вы хотите сделать что-то иное, чем закрытие диалога при нажатии кнопки exscape, вам следует использовать событие диалога beforeClose. Если все, что вы хотите сделать, это закрыть диалог; все готово : -)

И, наконец, хорошая практика - не использовать встроенные стили. Так что вместо этого: 

<a href="" class="click_me" style="font-size:15px;">Click for a modal</a>

Создайте файл CSS со следующим: 

.click_me {
    font-size:15px;
}

Вы можете сделать то же самое для #dialog, включая границу, которую вы сейчас применяете с помощью JavaScript: 

#dialog {
    border: 5px solid #848484;
    width:640px;
}

Надеюсь, это поможет.

Вот рабочий пример, который применяет четыре упомянутых мной пункта: http://jsfiddle.net/PPvG/yHTJw/

Обратите внимание, что стили пользовательского интерфейса jQuery отсутствуют, поэтому диалог немного уродлив. : -)

Чтобы Диалог работал должным образом, убедитесь, что вы используете последние версии jQuery и jQuery UI и что вы включили тему jQuery UI.

Вот пример, где все загружается через Google CDN : 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

Включите их в <head> вашего HTML. Результат должен выглядеть вот так . Если этого не произойдет, вы можете попробовать несколько вещей:

  • Посмотрите на консоль JavaScript вашего браузера (у каждого современного браузера есть такая; Google it).
  • Попробуйте другой браузер.
  • Попробуйте загрузить страницу другим способом (например, через file:// по сравнению с localhost).
  • (Экстремальный случай :) Попробуйте другой компьютер и другое подключение к Интернету.

Если ничего из этого не работает, извините, но ... "вы делаете это неправильно". : -Р

Обратите внимание, что приведенный выше фрагмент будет включать в себя стандартную тему пользовательского интерфейса jQuery, которая называется "base". Если это не соответствует вашим потребностям, вы можете использовать Google CDN для нескольких других тем по умолчанию (см. этот пост ) или создать собственную тему, используя ThemeRoller .

Edit:

Чтобы убедиться, что диалог сохраняет фокус (и, таким образом, закрывается, когда пользователь нажимает ESC, даже если пользователь щелкнул где-то еще на странице), попробуйте установить modal в значение true: 

 $('#dialog').dialog({
    autoOpen: false,
    modal: true
});

jsFiddle: http://jsfiddle.net/PPvG/yHTJw/3/

Обычно пользователь все еще может взаимодействовать с другими элементами на странице (и, следовательно, эти элементы могут отвлекать внимание от диалога). Когда для параметра modal установлено значение true, пользователь больше не может выполнять итерацию по остальной части страницы, и диалог будет сохранять фокус независимо от того, что.

Надеюсь, это поможет.

2 голосов
/ 02 января 2012

попробуйте использовать $("#dialog").close(); вместо $("body").unbind("keyup.myDialog");

0 голосов
/ 28 февраля 2018 
  .dialog({
            title: "Confirmation",
            modal: true, zIndex: 10000, autoOpen: true,
            resizable: false,
            width: 1000,
            height: 530,
            maxHeight: 1000,
            minHeight: 200,
            closeOnEscape: false,
            buttons: {
                Yes: function () {
                    CLOSEDDPROJECT.confirmCancelRequest();
                    $(this).dialog("close");
                },
                No: function () {
                    $(this).dialog("destroy");
                    $('.propagateRA').prop('checked', false);
                }
            },
            close: function () {
                $(this).remove();
            }
        });

попробуйте использовать $ (this) .dialog ("destroy"); вместо $ (this) .dialog ("close");

...