JavaScript - модальное окно с заданным html

Question

как я могу открыть модальное окно, используя только javascript.Я не могу использовать собственный html-файл, поэтому я должен передать html-данные напрямую в метод, который покажет окно.Не могли бы вы помочь мне с этим?

---

upd: я не могу использовать собственную библиотеку.

Answer 1

Безбиблиотечное решение:

Сделайте div, заполненный контентом, стилизуйте его так, чтобы он плавал над вашим контентом и имел display:hidden при загрузке страницы.С javascript установленным myDialog.style.display = 'block' и вот ваш модал.

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

В принципе, все довольно просто.Это больше CSS, чем JS, и логика просто показывает / скрывает модальный элемент диалога.

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

Answer 2

Попробуйте плагин jQuery "lightbox-style". Мой любимый ColorBox , который делает то, что вам нужно. Пример:

$.fn.colorbox({html:'<p>Hello</p>'});

Answer 3

Ссылки, найденные в Google (только частично), связанные с вопросом, показывающим эту проблему, не являются уникальными. Они не были рассмотрены.

http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/

http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

http://javascript.about.com/library/blmodald3.htm

http://www.digitalmediaminute.com/article/2021/css-and-javascript-modal-dialogs

http://okonet.ru/projects/modalbox/

http://msdn.microsoft.com/en-us/magazine/cc164247.aspx

Answer 4

Множество простых библиотек JavaScript для подобных вещей. Thickbox довольно круто.