README

bsPrompt is a jQuery plugin for Bootstrap 5 that replaces window.prompt with a Bootstrap modal dialog.

Installation

<link rel="stylesheet" href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/components/jquery/jquery.min.js"></script>
<script src="vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="dist/bs-prompt.js"></script>

Usage

$.bsPrompt() is asynchronous because Bootstrap modals cannot block JavaScript execution like the native browser prompt. The returned jQuery Promise is the primary API for reading the result.

$.bsPrompt({
  title: 'Enter a name',
  message: 'What should the new item be called?',
  label: 'Name',
  type: 'text',
  required: true
}).then(function (value) {
  if (value === null) {
    return;
  }

  console.log(value);
});

Short form:

$.bsPrompt('Please enter a name', 'Default value').then(function (value) {
  console.log(value);
});

Handling Confirm

Confirmed prompts resolve with the submitted string.

$.bsPrompt({
  title: 'Password',
  label: 'Password',
  type: 'password',
  required: true
}).then(function (value) {
  if (value === null) {
    return;
  }

  submitPassword(value);
});

Handling Cancel

Cancelled prompts resolve with null.

$.bsPrompt({
  title: 'Delete item',
  message: 'Type the item name to continue.',
  required: true
}).then(function (value) {
  if (value === null) {
    console.log('The prompt was cancelled.');
    return;
  }

  deleteItem(value);
});

Optional Callbacks

Use onConfirm and onCancel only for side effects such as logging, analytics, or small UI updates. Do not use them as the main way to read the prompt result.

$.bsPrompt({
  title: 'Enter a name',
  required: true,
  onConfirm: function (value) {
    console.log('confirmed', value);
  },
  onCancel: function () {
    console.log('cancelled');
  }
}).then(function (value) {
  console.log('result', value);
});

Options

Default Texts

$.bsPrompt.setDefaults({
  title: 'Please provide input',
  okText: 'Continue',
  cancelText: 'Dismiss',
  invalidFeedback: 'This field is required.'
});

Replacing Native Prompt

replaceNative() overwrites window.prompt. After installing it, calls to prompt() open a Bootstrap modal instead of the browser's native blocking prompt.

$.bsPrompt.replaceNative({ required: true });

prompt('Name?', 'Max').then(function (value) {
  console.log(value);
});

This is intentionally not a drop-in replacement for synchronous code. Native browser prompts block JavaScript and return a string immediately; Bootstrap modals are asynchronous and return a jQuery Promise.

This native code cannot be preserved unchanged:

var value = prompt('Name?');
console.log(value);

Use the Promise result instead:

prompt('Name?').then(function (value) {
  if (value === null) {
    return;
  }

  console.log(value);
});

Restore the original browser prompt:

$.bsPrompt.restoreNative();