How to customize Bootbox.js prompt options

Mariano J. Ponce picture Mariano J. Ponce · Oct 30, 2013 · Viewed 39.7k times · Source

I am trying to customize bootboxjs.prompt options, but it seems that it doesn't allow an options object as a parameter

This is the example from http://bootboxjs.com/index.html#api

bootbox.prompt("What is your name?", function(result) {                
  if (result === null) {                                             
    Example.show("Prompt dismissed");                              
  } else {
    Example.show("Hi <b>"+result+"</b>");                          
  }
});

This is what I am trying to pass:

var promptOptions = {
  title: "Custom label",
  buttons: {
    confirm: {
      label: "Save"
    }
  }
};

bootbox.prompt(promptOptions, function(result) {                
  if (result === null) {                                             
    console.log("Prompt dismissed");                              
  } else {
    console.log("Hi "+result);                          
  }
});

How can I customize the title and buttons label ?

Answer

haradwaith picture haradwaith · Nov 5, 2013

You will be able to make a custom prompt using custom dialogs. The only thing you have to know is that the message string you give to bootbox doesn't have to be plain text. It can be HTML, so you can put your own prompt in a custom bootbox dialog.

What you are trying to do is this (using Bootbox 4.x):

bootbox.dialog({
  message: "First name:<input type='text' id='first_name'>",
  title: "Custom label",
  buttons: {
    main: {
      label: "Save",
      className: "btn-primary",
      callback: function() {
        console.log("Hi "+ $('#first_name').val());
      }
    }
  }
});