Как просто вызывать модальное окно?

Question

[lavezzi1]

Здравствуйте!
Хочу научится вызывать модальное окна таким образом:

$('#add-feedback').on("click", function() {
  $('#modal-add-feedback').modal('show');
});

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

Спасибо!

Comments

[Денис]

Пишем плагин для jQuery

Answer 1

[Pavel Torbeev]

В вашем случае, вам нужен скрипт, который будет управлять функцией .modal (бутстрап подойдет)
кнопка с ид add-feedback и модальное окно, предворительно скрытое.
Вот тут есть примеры

Comments

[lavezzi1]

Я таких примеров могу штук 10 найти, но суть не в этом. Я хочу научится писать эти функции.

[Pavel Torbeev]

Так что мешает написать?
- Фиксированное положение блока по середине страницы
- Скрипт, который при клике на кнопку делает блок видимым

Пример в бутстрапе - более чем наглядный. 10 штук примеров, которые вы сами сможете найти действуют по аналогичному сценарию. Какой ответ вы в итоге ждете?

[lavezzi1]

Я хочу узнать как конструкцию кода:
$('#add-feedback').on("click", function() {
$('#modal-add-feedback').modal('show');
});

Как создан метод modal('show'). Это же не нативная функция jquery. Как верстается модальное окно я знаю.

[Pavel Torbeev]

https://github.com/twbs/bootstrap/blob/master/js/m...

Answer 2

[Владимир Ио]

Да все просто.
Сам контейнер модала либо сразу существует в DOM-модели, либо подтягивается туда ajax-ом по клику и по-умолчанию скрыто.
Позиционирование модала задано через CSS(position) относительно тех элементов, внутри которых он должен смотреться или относительно подкладки, которая лежит сверху.
Чтобы подкладка была поверх всего, ей задается наивысший z-index и ширина/высота по всю перекрываемую область.
А далее, по клику, модал и его подкладка показываются через установку у них свойств видимости а-ля(display:block), предварительно получив и забиндив данные для отображения.
Если вам нужен код, то его можете глянуть в том же bootstrap modal, а примерный алгоритм я вам описал.

Comments

[lavezzi1]

Нужна конструкция этого кода:
$('#add-feedback').on("click", function() {
$('#modal-add-feedback').modal('show');
});

Как создается этот modal() метод.

[Medin K]

lavezzi1: смотри как пишутся плагины к jquery
или возми бутстрап
anton.shevchuk.name/javascript/jquery-for-beginner...