JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//angularlight.org/bin/alight_basis_0.13.last.min.js"></script>
<div id="app">
    <div class="form-group">
        <label>
            Enter text to display in popup:
        </label>
        <input class="form-control" al-value="text" type="text" />
    </div>
    <p>
        <button class="btn btn-default" @click="openPopup()">
            Open popup
        </button>
    </p>
</div>

CSS

.popup-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background: rgba(100, 100, 100, 0.6);

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

TypeScript

window.service = {
	popup: {
  	overlay: (scope,  html) => {
    	const popup = document.createElement('div');
      popup.className = 'popup-overlay';
      popup.innerHTML = html;
      document.body.appendChild(popup);
      const cd = alight(popup, scope);
      scope.close = => {
      	cd.destroy();
      	document.body.removeChild(popup)
      }
    },
    open: (text) => {
    	service.popup.overlay({title: text}, `
        <div class="alert alert-success">
          <h2>${text}</h2>
          <button class="btn btn-warning" @click="close()" type="button">
            Close popup
          </button>
        </div>`);
    }
  }
}

let app = {
	text: 'Open popup with this text';
	openPopup: () => {
  	service.popup.open(app.text)
	}
}

alight('#app', app);