Всплывающее диалоговое окно 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

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

Ответ 1

Этот 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;
  });
});

Ответ 2

Ваша проблема заключается в вызове диалога

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

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

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

Ответ 3

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

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

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

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

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

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

Ответ 4

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

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

Ответ 5

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

Сам модал состоит из основного модального контейнера, заголовка, тела и нижнего колонтитула. Нижний колонтитул содержит действия, которые в этом случае являются кнопками ОК, заголовок содержит заголовок и кнопку закрытия, а тело содержит модальный контент.

 $(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

Ответ 6

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

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

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