BootBox Demo

by Brian Fitzgerald

HTML

<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<p>Content here.</p>

JavaScript

bootbox.confirm({
      title: "Save Foo",
      message: '<div class="row">  ' +
      '<div class="col-md-12"> ' +
      '<div class="text-center">Save</div>' +
      '<form class="form-horizontal"> ' +
      '<div class="form-group"> ' +
      '<label class="col-md-4 control-label" for="Question">Question</label> ' +
      '<div class="col-md-4"> ' +
      '<input id="name" name="name" type="text" value="Question" class="form-control input-md"> ' +
      '<span class="help-block">You can edit your question before saving</span> </div> ' +
      '</div> ' +
      '<div class="form-group"> ' +
      '<label class="col-md-4 control-label" for="notesbox">Notes:</label> ' +
      '<div class="col-md-4"> <div class="textarea"> <label for="notesbox"> ' +
      '<textarea name="notesbox" id="notesbox" rows="10" cols="30"></textarea></form></div> ' +
      '</label> ' +
      '</div>' +
      '</div> ' +
      '</div> </div>' +
      '</form> </div>  </div>',
    buttons: {
        'cancel': {
            label: 'Don\'t save',
            className: 'btn-danger pull-left'
        },
        'confirm': {
            label: 'Save',
            className: 'btn-success pull-right',
        }
    },callback: function (result) { if (result ==true)
    { alert('Success')}
                  }
                }
              
        );