Replaces the native JavaScript alert, confirm, and prompt, with BootStrap alternatives!

README.md

Bootstrap 4 Pop-up (Live Demo)

Replaces the native JavaScript alert, confirm, and prompt with non-blocking Bootstrap alternatives!

Requirements

• Bootstrap 4 (just in case you did not read the name)
• Native JavaScript Promise

Features

• Display non blocking pop-ups
• Modals are queued and shown one at a time

Method

/**
 * @description Inspired by https://www.bootply.com/PoVEEtvPZt. Used to display a pop up with bootstrap elements
 * @param {object} options - Options
 * @param {string} [options.type="alert"] - alert, prompt, confirm
 * @param {string} [options.modalSize="modal-sm"] - modal-sm, modal-lg
 * @param {string} [options.okButtonText="Ok"]
 * @param {string} [options.cancelButtonText="Cancel"]
 * @param {string} [options.yesButtonText="Yes"]
 * @param {string} [options.noButtonText="No"] - empty string to hide the No button
 * @param {string} [options.headerText="Attention"]
 * @param {string} [options.messageText="Message"]
 * @param {string} [options.bootstrapStyle="default"] - default, primary, success, info, warning, danger
 * @param {string} [options.inputFieldType="text"] - could ask for number, email, etc
 * @param {string} [options.inputFieldDefault=""] - default value for the input
 * @return {Promise<undefined|boolean|string>} Alert returns undefined. Confirm returns boolean or undefined if the close button is pressed. Prompt returns a string or undefined if the close button is pressed.
 */
BootstrapPopUp(options: object): Promise<undefined|boolean|string>

Example

Live Demo

/**
 * Bootstrap 4 default pop-ups
 */
$('#default-alert-bootstrap').on('click', function () {
  BootstrapPopUp({})
    .then(function (result) {
      console.info(result);
      return;
    });
  return;
});
$('#default-confirm-bootstrap').on('click', function () {
  BootstrapPopUp({
    type: "confirm"
  })
    .then(function (result) {
      console.info(result);
      return;
    });
  return;
});
$('#default-prompt-bootstrap').on('click', function () {
  BootstrapPopUp({
    type: "prompt"
  })
    .then(function (result) {
      console.info(result);
      return;
    });
  return;
});

/**
 * Bootstrap 4 custom pop-ups
 */
$('#alert-bootstrap').on('click', function () {
  BootstrapPopUp({
    type: "alert",
    messageText: "Bootstrap alert",
    okButtonText: "Dismiss Alert",
    modalSize: "modal-sm",
    headerText: "Attention Custom Pop-up Header!"
  })
    .then(function (result) {
      console.info(result);
      return;
    });
  return;
});
$('#confirm-bootstrap').on('click', function () {
  BootStrapPopUp({
    type: "confirm",
    messageText: "BootStrap confirm",
    yesButtonText: "Dismiss with Yes",
    noButtonText: "Dismiss with No",
    modalSize: "modal-sm",
    headerText: "Attention Custom Pop-up Header!"
  })
    .then(function (result) {
      console.info(result);
      return;
    });
  return;
});
$('#prompt-bootstrap').on('click', function () {
  BootStrapPopUp({
    type: "prompt",
    messageText: "BootStrap prompt",
    okButtonText: "Submit",
    cancelButtonText: "No Thanks",
    inputFieldType: "text",
    inputFieldDefault: "default value",
    modalSize: "modal-sm",
    headerText: "Attention Custom Pop-up Header!"
  })
    .then(function (result) {
      console.info(result);
      return;
    });
  return;
});

License

MIT

Bootstrap 4 Popup.js

/**
 * @description Inspired by https://www.bootply.com/PoVEEtvPZt. Used to display a pop up with bootstrap elements
 * @param {object} options - Options
 * @param {string} [options.type="alert"] - alert, prompt, confirm
 * @param {string} [options.modalSize="modal-sm"] - modal-sm, modal-lg
 * @param {string} [options.okButtonText="PerformanceObserverCallback"]
 * @param {string} [options.cancelButtonText="Cancel"]
 * @param {string} [options.yesButtonText="Yes"]
 * @param {string} [options.noButtonText="No"] - empty string to hide the No button
 * @param {string} [options.headerText="Attention"]
 * @param {string} [options.messageText="Message"]
 * @param {string} [options.bootstrapStyle="default"] - default, primary, success, info, warning, danger
 * @param {string} [options.inputFieldType="text"] - could ask for number, email, etc
 * @param {string} [options.inputFieldDefault=""] - default value for the input
 * @return {Promise<undefined|null|boolean|string>} Alert returns undefined. Confirm returns boolean or undefined if the close button is pressed. Prompt returns a string, null for cancel button, or undefined if the close button is pressed.
 */
function BootstrapPopUp(userOptions)
{
	return new Promise(function (resolve, reject)
	{
		var defaults = {
			type: "alert",
			modalSize: 'modal-sm',
			okButtonText: 'OK',
			cancelButtonText: 'Cancel',
			yesButtonText: 'Yes',
			noButtonText: 'No',
			headerText: 'Attention',
			messageText: 'Message',
			bootstrapStyle: 'default',
			inputFieldType: 'text',
			inputFieldDefault: '',
		};
		var headClass = "";
		var modalButtons = "";
		var options = $.extend({}, defaults, userOptions); // Merge the options together and defaults
		var modal;
		var result = undefined;

		/**
		 * Get the header style
		 */
		switch (options.bootstrapStyle)
		{
			case "primary":
				{
					headClass = "alert-primary";
					break;
				}
			case "success":
				{
					headClass = "alert-success";
					break;
				}
			case "info":
				{
					headClass = "alert-info";
					break;
				}
			case "warning":
				{
					headClass = "alert-warning";
					break;
				}
			case "danger":
				{
					headClass = "alert-danger";
					break;
				}
			default:
				{
					headClass = "navbar-default";
					break;
				}
		}

		/**
		 * Create the buttons
		 */
		switch (options.type)
		{
			case 'alert':
				modalButtons = '<button class="btn btn-' + options.bootstrapStyle + '">' + options.okButtonText + '</button>';
				break;
			case 'confirm':
				modalButtons = '<button data-type="yes" class="btn btn-primary">' + options.yesButtonText + '</button>';
				if ("string" === typeof options.noButtonText &&
					0 < options.noButtonText.length)
				{
					modalButtons += '<button data-type="no" class="btn btn-default">' + options.noButtonText + '</button>';
				}
				break;
			case 'prompt':
				options.messageText = options.messageText + '<br /><br /><div class="form-group"><input class="userInput form-control" type="' + options.inputFieldType + '" value="' + options.inputFieldDefault + '" /></div>';
				modalButtons = '<button class="btn btn-' + options.bootstrapStyle + '">' + options.okButtonText + '</button>';
				modalButtons += '<button data-type="cancel" class="btn btn-default">' + options.cancelButtonText + '</button>';
				break;
		}

		/**
		 * Create the modal and dispaly it
		 */
		modal = $(
			'<div class="modal fade" tabindex="-1" role="dialog">' +
			'   <div class="modal-dialog" role="document" class="' + options.modalSize + '">' +
			'      <div class="modal-content">' +
			'         <div class="modal-header ' + headClass + '">' +
			'            <h5 class="modal-title">' + options.headerText + '</h5>' +
			'            <button type="button" class="close" data-dismiss="modal" data-type="close" aria-label="Close">' +
			'               <span aria-hidden="true">&times;</span>' +
			'            </button>' +
			'         </div>' +
			'         <div class="modal-body">' + options.messageText + '</div>' +
			'         <div class="modal-footer">' + modalButtons + '</div>' +
			'      </div>' +
			'   </div>' +
			'</div>'
		);
		$('body').append(modal);

		/**
		 * Handle the button presses for all the modal types
		 */
		modal.find("button").on('click', function (e)
		{
			var type = $(this).data("type");

			switch (options.type)
			{
				case 'alert':
					result = undefined;
					break;
				case 'confirm':
					if ("yes" === type)
					{
						result = true;
					}
					else if ("no" === type)
					{
						result = false;
					}
					else if ("close" === type)
					{
						result = undefined;
					}
					else
					{
						result = undefined;
					}
					break;
				case 'prompt':
					if ("close" === type)
					{
						result = undefined;
					}
					else if ("cancel" === type)
					{
						result = null;
					}
					else
					{
						result = modal.find('input.userInput').val();
					}
					break;
			}
			modal.modal('hide');
			return;
		});

		/**
		 * Set up event listeners and show the modal
		 */
		modal.modal({
			show: false,
			backdrop: 'static',
			keyboard: false
		})
			.on('hidden.bs.modal', function (e)
			{
				/**
				 * Wait until the modal is removed from the DOM to resolve because they may chain multiple pop ups
				 */
				modal.remove();
				resolve(result);
				return;
			})
			.on('shown.bs.modal', function (e)
			{
				/**
				 * Select the input if it is there
				 */
				if (0 < modal.find('input.userInput').length)
				{
					modal.find('input.userInput').first().focus();
				}
				return;
			})
			.modal('show');
		return;
	});
}