Multi-step Modal Wizard

Multi-step Modal Wizards

form.modal.modal-wide.multi-step id="demo-modal" reset-on-close="true"
    .modal-dialog
      .modal-content
        .modal-header
          h4.modal-title.step-1 data-step="1"
            |Step 1
          h4.modal-title.step-2 data-step="2"
            |Step 2
          h4.modal-title.step-3 data-step="3"
            |Step 3
        .modal-body.step.step-1 data-step="1"
          | This is step 1.
        .modal-body.step.step-2 data-step="2"
          | This is step 2.
        .modal-body.step.step-3 data-step="3"
          | This is the final step.
        .modal-footer
          button.btn.btn-default type="button" data-dismiss="modal"
            | Close
          button.btn.btn-primary.step.step-1 type="button" data-step="1" onclick="#{"Oma.modal.event('#demo-modal', 2)".html_safe}"
            | Continue to 2
          button.btn.btn-default.step.step-2 type="button" data-step="2" onclick="#{"Oma.modal.event('#demo-modal', 1)".html_safe}"
            | Back to 1
          button.btn.btn-primary.step.step-2 type="button" data-step="1" onclick="#{"Oma.modal.event('#demo-modal', 3)".html_safe}"
            | Continue to 3

button.btn.btn-default data-toggle="modal" data-target="#demo-modal"
  | Show

Using (in assets/oma/modal.js.coffee)

Oma['modal'] =
  event: (sel, step) ->
    $(sel).trigger 'next.m.' + step
    return