Для динамического создания элемента и его открытия в диалоговом окне (событие закрытия, если щелкнуть вне диалогового окна) в чистом виде javascript

Question

Мне нужно открыть dialog, в котором мне нужно добавить элемент div (который также должен быть создан при открытии диалога). Событие открытия / закрытия диалогового окна выглядит так: Необходимо открыть его при нажатии кнопки, Необходимо закрыть его при нажатии вне диалогового окна.

, пожалуйста, помогите мне решить эту проблему.

js:

function clickFunc() {
        'use strict';
        let child = document.createElement("DIV");
        child.innerHTML = '<div  id="fnameId">Hi I am a new Div</div>';
        body.appendChild(child);
        //here this div with id='frameId', need to be shown in dialog box.
}

html:

<button onclick="clickFunc();">Open Dialog</button>