jibeinc/juice

View on GitHub
examples/modal/modal-div.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html>
<head>
  <title>Div Modal Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  <script src='../../dist/ui.js'></script>
</head>
<body>

<div class="button-container"></div>

<div class="modal-container" style="background-color: cadetblue; height: 200px; position: relative; width: 400px;"></div>

<div class="change-content"></div>

<script>
  var modal = new UI.Modal('.modal-container', 'This is a test modal',
      {
        fullscreenModal: false,
        hideOnOverlayClick: false,
        showOverlay: true
      });

  modal.render();

  var btn = new UI.Button('.button-container', {
    label: 'Show modal',
    submit: false
  });

  btn.subscribe(function () {
    modal.show();
  });

  btn.render();

  var btn2 = new UI.Button('.change-content', {
    label: 'Change Modal Content',
    submit: false
  });

  btn2.subscribe(function () {
    modal.set('New content woot!');
    modal.show();
  });

  btn2.render();

</script>

</body>
</html>