knockoutjs modal dialog

by andrew rowe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div id="popUpModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" aria-hidden="true" data-bind="click: clickCancel" type="button" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Existing RadConsult Found</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-bind="click: clickCancel" data-dismiss="modal">Cancel</button>
        <button class="btn btn-primary" type="button" data-bind="click: clickContinue">Continue</button>
      </div>
    </div>
  </div>
</div>
<button data-bind="click: clickOpenDialog">
  Do the AJAX
</button>
<div data-bind="visible: mode()=='continue'">
  Continue clicked
</div>
<div data-bind="visible: mode()=='cancel'">
  Cancel clicked
</div>

JavaScript

class ViewModel {
  constructor() {
    this.mode = ko.observable('start');
    const options = {};
    this.myModal = new bootstrap.Modal(document.getElementById('popUpModal'), options);
    document.getElementById('popUpModal').addEventListener('hidden.bs.modal', (event) => console.log('hidden'));
  }
  clickOpenDialog(evt) {
    this.mode('confirm');
    this.myModal.show()
  }
  clickContinue(evt) {
    this.mode('continue');
    this.myModal.hide()
  }
  clickCancel(evt) {
    this.mode('cancel');
    this.myModal.hide()
  }
}

viewModel = new ViewModel()
ko.applyBindings(viewModel);