Всплывающее диалоговое окно не работает в функции html ()

Question

У меня есть тег div, который будет динамически заполняться диалогом.

<div id="f2"></div>

Теперь, в моей форме отправки функции, я даю

$("#f2").html("<a href='#noncustomer' data-rel='dialog' data-transition='pop'>Thank you for your information. You will receive a call as soon as a representative is available</a>");

Но проблема в том, что всплывающее окно не отображается. Он просто показывает содержимое в виде простого текста.

Может кто-нибудь сказать мне, как заставить всплывающее окно появляться?

Answer 1

Похоже, вам нужен простой модальный плагин jQuery.Вы можете попробовать:

• SimpleModal
• jqModal

Для SimpleModal после установки HTML для#f2, просто вызовите метод .modal() для него, и он отобразит содержимое в виде модального всплывающего окна:

$("#f2").html("<a href='#noncustomer' data-rel='dialog' data-transition='pop'>Thank you for your information. You will receive a call as soon as a representative is available</a>");
$("#f2").modal();

Возможно, вы захотите включить следующий стиль в свой CSS для затемнения фона:

#simplemodal-overlay {
    background-color: black;
}

Также включите класс CSS для отображения закрыть изображение , детализированное в инструкциях:

#simplemodal-container a.modalCloseImg {
    background:url(/img/x.png) no-repeat; /* adjust url as required */
    ...
}

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

Answer 2

Попробуйте использовать модальный плагин facebox http://chriswanstrath.com/facebox/