Всплывающее диалоговое окно jQuery

Я пытаюсь заставить эту диалоговую всплывающую форму отображаться при нажатии на эту ссылку, но она не работает для меня. Я работал над этим последние три часа, и это меня слишком расстраивает.

Вот мой HTML:

<a href="#" id="contactUs">Contact Us</a>
<div id="dialog" title="Contact form">
  <p>appear now</p>
</div>

А вот мой JavaScript, это во внешнем файле:

$("#contactUs").click(function() {
  $("#dialog").dialog("open");
  return false;
});

Я использовал эти ссылки, но безрезультатно для меня:

http://jqueryui.com/demos/dialog/#modal http://jqueryui.com/demos/dialog/#default

Пожалуйста, дайте мне знать, если есть идеи, высоко ценится, спасибо.

 rj270003 июн. 2012 г., 02:55
извините, в основном ошибка в том, что всплывающее окно вообще не отображается. И спасибо за ссылку, я проверю это сейчас.
 Zuul03 июн. 2012 г., 02:54
Нет ошибок? Никаких странных визуальных действий? Ничего такого ?
 mu is too short03 июн. 2012 г., 03:13
Как насчет демо наjsfiddle.net? Ответы, приведенные ниже, должны работать, поэтому что-то происходит, о чем вы нам не говорите.
 rcdmk12 дек. 2013 г., 14:08
Я знаю, что это немного устарело, но ваш код не ссылается на файлы jQ и css пользовательского интерфейса jQuery. Кроме того, вам не хватаетnavBar элемент, на который ссылается ваш код для создания меню.
 Chris Laplante03 июн. 2012 г., 02:54
Если вам интересно, у меня есть плагин для упрощения диалогов JQuery:mostthingsweb.com/2011/12/dialogwrapper-2-1-released

Ответы на вопрос(6)

Ваша проблема в вызове для диалога

Если вы не инициализируете диалоговое окно, вам не нужно проходить "открыто" чтобы показать:

$("#dialog").dialog();

Кроме того, этот код должен быть на$(document).ready(); функционировать или быть ниже элементов для его работы.

 rj270003 июн. 2012 г., 03:04
Благодарю. Я попробовал это, не проходя открытое, но все еще не работает для меня. Кроме того, я не опубликовал готовое событие, но оно присутствует в документе.
 03 июн. 2012 г., 03:54
Попробуйте эту скрипку:jsfiddle.net/N7PRp Меня устраивает.

Используйте ниже код, он работал для меня.

<script type="text/javascript">
     $(document).ready(function () {
            $('#dialog').dialog({
                autoOpen: false,
                title: 'Basic Dialog'
            });
            $('#contactUs').click(function () {
                $('#dialog').dialog('open');
            });
        });
</script>

Вы можете использовать следующий скрипт. У меня сработало

The modal itself consists of a main modal container, a header, a body, and a footer. The footer contains the actions, which in this case is the OK button, the header holds the title and the close button, and the body contains the modal content.

 $(function () {
        modalPosition();
        $(window).resize(function () {
            modalPosition();
        });
        $('.openModal').click(function (e) {
            $('.modal, .modal-backdrop').fadeIn('fast');
            e.preventDefault();
        });
        $('.close-modal').click(function (e) {
            $('.modal, .modal-backdrop').fadeOut('fast');
        });
    });
    function modalPosition() {
        var width = $('.modal').width();
        var, pageWidth = $(window).width();
        var x = (pageWidth / 2) - (width / 2);
        $('.modal').css({ left: x + "px" });
    }

См: -Модальное всплывающее окно с использованием jquery в asp.net

Этот HTML в порядке:

<a href="#" id="contactUs">Contact Us</a>                   
<div id="dialog" title="Contact form">
  <p>appear now</p>
</div>

Вам нужно инициализировать диалог (не уверен, что вы делаете это):

$(function() {
  // this initializes the dialog (and uses some common options that I do)
  $("#dialog").dialog({
    autoOpen : false, modal : true, show : "blind", hide : "blind"
  });

  // next add the onclick handler
  $("#contactUs").click(function() {
    $("#dialog").dialog("open");
    return false;
  });
});
 03 июн. 2012 г., 03:54
Попробуйте в этой скрипке:jsfiddle.net/N7PRp  Меня устраивает.
 rj270003 июн. 2012 г., 03:05
Спасибо, это помогает, однако, диалог все еще не появляется для меня. Я попытаюсь осмотреться побольше.

Это довольно просто, первый HTML должен быть добавлен:

<div id="dialog"></div>

Затем он должен быть инициализирован:

<script type="text/javascript">
  jQuery( document ).ready( function() {
    jQuery( '#dialog' ).dialog( { 'autoOpen': false } );
  });
</script>

После этого вы можете показать его по коду:

jQuery( '#dialog' ).dialog( 'open' );

Вы можете проверить эту ссылку: http://jqueryui.com/dialog/

Этот код должен работать нормально

$("#dialog").dialog();

Ваш ответ на вопрос