Нужен совет по реализации алгоритма с iframe

Есть определённый блок с параметрами сортировки, который лежит глубоко в DOM. В мобильной версии я хочу сделать его невидимым, но чтобы он открывался в виде модального окна по клику на определённую кнопку. Я сделал его невидимым и некликабельным в мобильной версии, а если прикрепить к нему класс .active, то он становится абсолютно спозиционированным, получает свойства top: 0; left: 0; right: 0; bottom: 0; и притягивается к краям экрана. Но проблема в том, что у родительских элементов есть свойство position: relative и абсолютно спозиционированный элемент не может выйти за их пределы и перекрыть их. Поэтому я пришёл к выводу, что для этого придётся добавить <iframe> и в него подгружать нужный мне DOM, чтобы показывать поверх всей станицы. В связи с этим возник вопрос, а не будет ли конфликта id="" друг с другом? А то выйдет, что один и тот же элемент с одинаковыми id будет повторяться на странице. И будет ли реагировать на события(click, hover и др) javascript при взаимодействии с элементами iframe?