Modal custom binding

Modal custom binding

by VipulS

HTML

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<label>
  <button class="btn btn-primary" data-bind="click: ShowModal">
    Show Modal
  </button>
</label>
<span data-bind="$data"></span>
<div class="modal fade inmodal in" 
     data-keyboard="false" 
     data-bind="modal:modalbox">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-bind="click :CloseModal" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal Title</h4>
            </div>
            <div class="modal-body">    
            <h4 class="modal-title">Modal Content</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-bind="click : CloseModal">Close</button>
            </div>
        </div>
    </div>
</div>

JavaScript

ko.bindingHandlers["modal"] = {
    init: (element, valueAccessor, allBindings, viewModel) => {
        $(element).modal({
            show: false,
            keyboard: false,
            backdrop: 'static'
        });
    },
    update: (element, valueAccessor, allBindings, viewModel) => {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal({
                show: true,
                keyboard: false,
                backdrop: 'static'
            });
        }
        else {
            $(element).modal('hide');
        }
    }
};

var viewModel = function() {
  this.modalbox = ko.observable(false)
  ShowModal = function() {
    this.modalbox(true)
  }
  ShowModal = function() {
    this.modalbox(true)
  }
  CloseModal = function() {
    this.modalbox(false)
  }
  };
  ko.applyBindings(viewModel);