Javascript-форум - Множественные скрытые html-контейнеры

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

задумался о том, как хранить и подгружать html-контент этих окошек.
Пока пришло в голову три варианта:
1. Хранить все в одном индексном файле. При необходимости делать видимыми нужные окна, в остальных случаях прятать их все.
2. Хранить данные внутри javascript и подгружать их по примеру:

$('#object_editor').html('<div class="settings_header"><div class="settings_header_name"><p class="header_text">Object Settings</p></div><div class="settings_header_close"><a href=# class="close_settings service_link">close</a></div></div><p class="info"> Item type: '+widget_type+', Item number: '+object_item+'</p>')

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

3. Хранить содержимое окон в микро-html файлах и подгружать их по мере необходимости аяксом.

var add_contact_form=$("#object_editor").load("add_contact_form.html");

Использую jquery.
Какой способ будет более удобным, гибким, расширяемым?