title: To create element dynamically and want to open it with a dialog (close event if clicked outside of dialog) in pure javascript
body: <p>I have to open a <code>dialog</code> in which I need to append a div element(which should also be created as dialog gets opened). dialog open/close event is as: 
  Need to open it on button click, 
  Need to close it on clicking outside of the dialog.</p>
  
  <p>please help me to get over this problem.</p>
  
  <h2>js:</h2>
  
  <pre><code>function clickFunc() {
          'use strict';
          let child = document.createElement("DIV");
          child.innerHTML = '&lt;div  id="fnameId"&gt;Hi I am a new Div&lt;/div&gt;';
          body.appendChild(child);
          //here this div with id='frameId', need to be shown in dialog box.
  }
  </code></pre>
  
  <h2>html:</h2>
  
  <pre><code>&lt;button onclick="clickFunc();"&gt;Open Dialog&lt;/button&gt;
  </code></pre>