Создать простое модальное всплывающее окно

Question

У меня очень простое требование. У меня есть два дел. Div1 со ссылкой и Div2 содержит текст.

При нажатии на ссылку в Div1 я хочу отобразить Div2 в виде простого модального всплывающего окна с серым фоном и кнопкой закрытия.

Теперь возможно сделать это без использования внешних плагинов.

Если нет, то я проверил плагин на jqueryui. Однако в этом примере упоминается так много файлов jquery и css, что я не знаю, что взять и что оставить.

Answer 1

Безусловно, это возможно без плагинов, но это может обернуться серьезной сантехникой.
Я сам использовал «самодельные» реализации модальных окон в чистом javascript.
Поверь мне - это не очень хорошая идея. Даже с jQuery (не путайте с jQuery UI).

Я бы порекомендовал вам плагин SimpleModal от Эрика Мартина (он тоже работает в StackOverflow и, по крайней мере, пытался ответить на все вопросы, связанные с его продуктом).
Мне нравится это API, и он работает как шарм.

Answer 2

Во-первых, спасибо за рекомендацию SimpleModal @Arnis L.

Во-вторых, есть причина, по которой существует так много модальных / лайтбокс-плагинов. Существует множество факторов, которые необходимо учитывать при создании кросс-браузерной совместимости. Таким образом, делать то, что вы хотите без каких-либо внешних плагинов, возможно, но чтобы сделать это правильно, потребуется много кода.

Итак, вы попросили помочь создать простой модал ... почему бы не попробовать SimpleModal;)

Вы можете скачать любой из примеров, чтобы начать работу. Все, что вам нужно сделать, это включить файл SimpleModal .js на свою страницу и добавить несколько стилей, и он готов к работе.

http://www.ericmmartin.com/projects/simplemodal-demos/

Answer 3

Нет, в jQuery нет встроенной функциональности модального окна. Вы можете использовать jQuery для запуска ваших собственных модальных окон, но в этом случае вы, вероятно, не задавали бы этот вопрос. Просто получите сторонний плагин.

Answer 4

Вот руководство о том, как сделать что-то подобное.

Answer 5

Вы можете сделать это без каких-либо плагинов, но сложная часть, которую вы, вероятно, захотите избежать, это модульность.

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

Я согласен, CSS достаточно, чтобы вы иногда захотели задохнуться.

О, и как уже было сказано, вы можете получить идеальную серую коробку с одной кнопкой, которая изменится под пользовательский интерфейс любого браузера: alert()