webcito/bs-prompt

description

v1.0.0 2026-06-02 06:50 UTC

Requires

• components/jquery: ^3
• twbs/bootstrap: ^5

proprietary

• thomas

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

Option	Default	Description
title	'Input required'	Modal title
message	''	Text above the input field
label	null	Input label
value	''	Initial value
type	'text'	Input type: text, password, email, number, url, tel, date, time, textarea, etc.
required	false	Prevents empty submissions
validate	null	Custom validation callback. Return true, false, or an error message string
invalidFeedback	'Please enter a value.'	Error message for empty values
okText	'OK'	OK button text
cancelText	'Cancel'	Cancel button text
onConfirm	null	Optional side-effect callback after a valid confirmation
onCancel	null	Optional side-effect callback after cancellation
attributes	{}	Additional HTML attributes, for example { maxlength: 80 }

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();