title: How to create Angular2 Modal Component WITHOUT Bootstrap and WITHOUT jQuery?
body: <p>All searches on this topic lead to importing existing components that depend on Bootstrap.</p>
  
  <p>I don't want to use Bootstrap. I want my own simpler HTML markup and way less class names to remember and crowd an already-complicated markup.</p>
  
  <p>I'm fairly comfortable with components, component lifecycle, services, templates, events, observables, and other Angular2 concepts, but I am only able to build an application with nested components whose "parent page" end up in &lt;router-outlet&gt;.</p>
  
  <p>I feel that there may be some lesser-known concepts of Angular2 that most tutorials and even video courses don't address, that would allow me to achieve modal popups. I think I will have to somehow "hack" the DOM to insert some html at the root of the entire webpage so that I can absolutely position the modal. I don't want to use jQuery because it might violate Angular2's inner workings and principles. If possible, I want to know an Angular2-safe way to manipulate the DOM if I have to - I prefer not to chase DOM elements from component code.</p>
  
  <p>I do not only want alert confirmations and prompts. I want to be able to put a form-component on the modal window that would allow the user to save something to the database or choose an item from a list.</p>
  
  <p>I know I'm asking for a lot, but specifically:</p>
  
  <ol>
  <li>What html markup and CSS should my popup component have at a minimum? Ideally, I want to put a translucent cover over the entire page, and the actual modal on top of it. to ensure that users can't click outside that modal window.</li>
  <li>How, if absolutely required, would services and observables be used to pull this?</li>
  <li>Can I just include this modal component's markup (as defined in its @Component({}) decorator) on a host/parent component and open it?</li>
  <li>Ideally, on the host component's code, I want to be able to call something like <code>selectRecordModal.onSelected(selectedItem =&gt; { .... }).onCancelled( () =&gt; { ... });</code></li>
  </ol>