maikttt

В примере кажется размыты потому что там у блока #efefcts в качестве background сама картинка iPhon-а, и размывается она (создается эффект что оригинальная каринка размыта)
Можешь добавитть весь контент (кроме окно) в блок которого будешь размывать при открытии окна
Вот пример

P.S.: На codepen не обязательно писать весь html, только то что в body, а JS не обязательно поставить в $(document).ready, он и так там будет.

ahk

Модальное окно обязательно должно быть изначально прописано в HTML?

НЕТ, не обязательно, ее можно поставить прямо перед нажатьем на кнопку "открыть".

В коде что в примере, есть ошыбки

link.setAttribute("id", idModalWindow);
link.setAttribute("data-toggle", "modal");
link.setAttribute("data-target", "#" + idModalWindow);

Создается link c ID=idModalWindow и атрибут data-target=#idModalWindow - то есть предпологается что это ссылка будет открывать окно у которыи id = idModalWindow - тоесть на странице будут два элемента с id=idModalWindow (кнопка и окно)

Пример будет работать есль (могут быть и другие варианты):
1. При создании окна, еи будет задан в качесте id то что передонно как параметр idModal (что логино)
modalWindow.setAttribute("id", idModal);
2. Сылке что открывает окно даем другои id чем параметр idModalWindow (например 'link-' + id)
link.setAttribute("id", 'link-' + id);
3. При нажатии на ссылку добовляем html модальное окно
(после создания ссылки добовляем еи eventListener)

link.addEventListener('click', function() {
        createModalWindow(idModalWindow, 'TITLE');
}, false);

4. Вызываем createLink - с нужными параметрами (убедимся что на странице есть блоки #container и #toolId)
createLink('Open', 'button', 'magic-window');
После закрытья окно может быть удалено странице.

P.S.
Как и Adamos советую использовать jQuery и как писал Никита Полевой в комм. большые примеры делаете на jsfiddle или на codepen.