<!DOCTYPE html>
<html>

<head>
  <link href="//cdn.jsdelivr.net/picnicss/5.1.0/picnic.min.css" rel="stylesheet" />
  <link href="//cdn.jsdelivr.net/picnicss/5.1.0/plugins.min.css" rel="stylesheet" />
</head>

<body>

  <h1>Hello Mag.JS!</h1>
  <a target="_blank" href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>

  <div class="container content">
    <div id="app">
      <h2>Modal</h2>
      <label for="modal_1" type="button" class="btn btn-primary pull-right spacing-top button">Open</label>
      <i class="message"><name></name></i>
      <modalme></modalme>
    </div>
  </div>

  <script src="//rawgit.com/magnumjs/mag.js/master/mag-latest.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.22.min.js"></script>

  <script src="data-service.js"></script>
  <script src="modal.js"></script>
  <script src="app.js"></script>
</body>

</html>
//Default props with AppState:
var appProps = {
  modal: data,
  isVisible: false
};

//App bootstrap:
mag.module('app', {
  controller: function(props) {
    
  //promise
  this.prom = mag.template('modal.html')
  .then((node) => mag(node, Modal));

  this.button = {
      _onClick: () => {
        //Run Modal:
        this.modalme = this.prom({
            data: data,
            onSave: (message) => {
              this.message = message;
            }
          })
          // change modal state to visible
        props.modal.toggleVisiblity();
      }
    }

  }
}, appProps);
//Modal module definition:
var Modal = {
  controller: function(props) {
    this.text = '';
  },
  view: function(state, props) {
    var isVisible = props.data.modal.isVisible;

    state.modal_1 = {
      _checked: typeof isVisible != 'undefined' ? isVisible : null
    }

    state.close = state.button = {
      _onClick: props.data.toggleVisiblity
    }

    state.a = {
      _onClick: function() {

        props.onSave({
          name: state.text
        });
        state.text = '';
        props.data.toggleVisiblity();
      }
    }

  }
};
<div id="modal">
  <div class="modal">
    <input id="modal_1" type="checkbox" />
    <label for="modal_1" class="overlay"></label>
    <article>
      <header>
        <h3>New Task</h3>
        <label for="modal_1" class="close">&times;</label>
      </header>
      <section class="content">
        <input name="text" class="field" autocomplete="off" />
      </section>
      <footer>
        <a class="button" href="#">Save</a>
        <label for="modal_1" class="button dangerous">
          Close
        </label>
      </footer>
    </article>
  </div>
</div>
var data = {
  modal: {
    isVisible: false
  },
  toggleVisiblity: function(changeTo) {
    data.modal.isVisible = !data.modal.isVisible;
  }
}