Binding to Bootstrap modal widget.

Examples

None Large Small

Html markup

<button class="btn btn-primary" data-bind="click: show">Show modal</button>

<div class="btn-group form-group" data-toggle="buttons" data-bind="radio: modalSize">
    <label class="btn btn-default">
        <input type="radio" name="modalSizing" value="" />
        None
    </label>
    <label class="btn btn-default">
        <input type="radio" name="modalSizing" value="modal-lg" />
        Large
    </label>
    <label class="btn btn-default">
        <input type="radio" name="modalSizing" value="modal-sm" />
        Small
    </label>
</div>

<div data-bind="modal: {
    visible: modalVisible,
    dialogCss: modalSize,
    header: { data: { label: headerLabel } },
    body: { name: bodyTemplate, data: bodyData },
    footer: { data: { action: switchTemplates, closeLabel: 'Custom text', primaryLabel: 'Change body template' } }
}"></div>

<script type="text/html" id="firstModalTemplate">
    <p data-bind="text: text"></p>
    <div class="form-group">
        <label data-bind="text: label"></label>
        <input type="text" data-bind="value: label, valueUpdate: 'afterkeydown'" class="form-control" />
    </div>
</script>

<script type="text/html" id="secondModalTemplate">
    <p data-bind="text: text"></p>
    <p data-bind="text: simpleLabel"></p>
</script>

View model

function ModalExampleViewModel() {

    var self = this;

    var firstTemplateData = {
        text: 'First template',
        label: ko.observable('Observable label')
    };

    var secondTemplateData = {
        text: 'Second template',
        simpleLabel: 'Simple text label'
    };

    self.modalVisible = ko.observable(false);

    self.show = function() {
        self.modalVisible(true);
    };

    self.headerLabel = ko.observable('Some header text');
    self.bodyTemplate = ko.observable('firstModalTemplate');
    self.bodyData = ko.computed(function() {
        return self.bodyTemplate() === 'firstModalTemplate' ? firstTemplateData : secondTemplateData;
    });

    self.okText = ko.observable();

    self.switchTemplates = function() {
        self.bodyTemplate() === 'firstModalTemplate' 
                            ? self.bodyTemplate('secondModalTemplate') 
                            : self.bodyTemplate('firstModalTemplate');
    };
        
    self.modalSize = ko.observable('modal-lg');
}

Options

All of the options can be observables.


                data-bind="modal: { options: options, visible: visible, dialogCss: dialogCss, header: header, body: body, footer: footer }"

options

Type: object, can be observable

Bootstrap options for modal. If any option is not specified, it uses default values (except show, it default value is false in comparing with Bootstrap). Also, can be specified via data-attributes. Please, see Bootstrap documentation for details.
visible

Type: boolean, can be observable (default: false)

Shows modal, if true, otherwise hides modal. By default is false.

Can be omitted in order to use Bootstrap's attributes for showing or closing modal.
dialogCss

Type: string, can be observable (default: undefined)

Used to add classes to modal-dialog element. For example, it can accept modal-lg value for large modal or modal-sm for small.

Please, see Bootstrap documentation for more details.
header

Type: object, can be observable

Template binding for modal header, uses options from Knockout template binding. Please, see Knockout documentation for details.

Default values of header object:
- name
  
  Type: string, can be observable (default: 'modalHeader')
  
  Name of template for modal header. Default template:
```
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 data-bind="text: label"></h3>
```
- data
  
  Type: object
  
  Data for header template. For default template, you should provide label property
body

Type: object, can be observable

Template binding for modal body, uses options from Knockout template binding. Please, see Knockout documentation for details.

Default values of body object:
- name
  
  Type: string, can be observable (default: 'modalBody')
  
  Name of template for modal body. Default template:
```
<div data-bind="html: content"></div>
```
- data
  
  Type: object
  
  Data for body template. For default template, you should provide content property, which can contain html.
footer

Type: object, can be observable

Template binding for modal footer, uses options from Knockout template binding. Please, see Knockout documentation for details.

If omitted, no footer will be rendered.

Default values of footer object:
- name
  
  Type: string, can be observable (default: 'modalFooter')
  
  Name of template for modal footer. Default template:
```

<a href="#" class="btn btn-primary" data-bind="click: action, html: primaryLabel"></a>

<a href="#" class="btn btn-default" data-bind="html: closeLabel" data-dismiss="modal"></a>
```
- data
  
  Type: object
  
  Data for footer template. For default template, data object contains:
  - action
    
    Type: function
    
    Function, which will be called, when user clicks on primary button. If this property is omitted for default template, primary button wouldn't render.
  - primaryLabel
    
    Type: string, can be observable (default: 'Ok')
    
    Text for primary button in default template.
  - closeLabel
    
    Type: string, can be observable (default: 'Close')
    
    Text for closing button in default template.

Default values

Default values for modal binding located in ko.bindingHandlers.modal.defaults object. It contains default css and attributes for root element of modal and default values for header, body and footer. Can be changed before ko.applyBindigs() is called.

defaults: {
    css: 'modal fade',
    attributes: {
        role: 'dialog'  
    },

    headerTemplate: {
        name: 'modalHeader',
        templateEngine: ko.stringTemplateEngine.instance
    },

    bodyTemplate: {
        name: 'modalBody',
        templateEngine: ko.stringTemplateEngine.instance
    },

    footerTemplate: {
        name: 'modalFooter',
        templateEngine: ko.stringTemplateEngine.instance,
        data: {
            closeLabel: 'Close',
            primaryLabel: 'Ok'
        }
    }
}