bootstrap-modbox - Documentation

Alert

Basic

									
										modbox.alert('Pay attention to the thing.');

Using options object and Promise

									
										modbox.alert({
											body: 'Pay attention to the thing.'
										})
										.then(() => console.log('Alert resolved'));

With markup and custom button options

									
										modbox.alert({
											body: '<div class="text-center fw-bold">Pay attention to the thing!</div>',
											closeButton: {
												label: 'I see it!',
												style: 'primary',
												outline: true
											}
										});

Danger/Error modal with header title

									
										modbox.error({
											title: 'Oops',
											body: 'You broke the thing.',
											closeButton: {
												label: "It wasn't me"
											}
										});

Success modal with header/button icons

									
										modbox.success({
											icon: 'fas fa-check',
											body: 'We did the thing!',
											closeButton: {
												icon: 'fas fa-times'
											}
										});

Confirm

Using custom buttons and Promise

									
										modbox.confirm({
											body: 'Did you pay attention to the thing?',
											okButton: {
												label: 'Yes',
												size: 'lg'
											},
											closeButton: {
												label: 'No',
												size: 'sm'
											}
										})
										.then(() => console.log('okButton clicked'))
										.catch(() => console.log('okButton not clicked'));

Alternate modal size

									
										modbox.confirm({
											body: 'Should we do the thing?',
											size: 'lg'
										});

Prompt

Required input matching a pattern

									
										modbox.prompt({
											body: 'What is the answer to the ultimate question of life, the universe, and everything?',
											input: {
												required: true,
												pattern: /\d+/
											}
										})
										.then(response => console.log(response));

Using Promise in an async function

									
										(async () => {
											try {
												const response = await modbox.prompt('What was the thing to which you <i>definitely</i> paid attention?');
												console.log(response);
											}
											catch(err) {
												console.log('okButton not clicked');
											}
										})();

Custom input field

									
										modbox.prompt({
											body: 'How many fingers am I holding up?',
											input: `
												<select class="form-select" id="modbox-input-fingers">
													<option value=""></option>
													<option value="0">0</option>
													<option value="2">2</option>
													<option value="7">7</option>
													<option value="12">12</option>
													<option value="-1">All of them</option>
												</select>
											`,
											okButton: {
												close: false,
												callback: (event, modal) => {
													if (document.getElementById('modbox-input-fingers').value === '12') {
														alert('Correct!');
														modal.hide();
													}
													else {
														alert('Wrong! Guess again.');
													}
												}
											}
										});

Custom

Note

The examples below all have the destroyOnClose options set to true only because of how they're being called/generated on this demo page. While it's ok to use that option, normally it would not be enabled to avoid repeated DOM changes if/when the modal is opened multiple times. Instead, best practice would be to call the modbox constructor once, then call .show() and .hide() where applicable.

Multiple events and justified buttons added in various ways

									
										const myModal = new modbox({
											id: 'myModal',
											style: 'primary',
											title: 'My Custom Modal',
											body: 'Details about that thing you were meant to be doing all day.',
											justifyButtons: 'between',
											destroyOnClose: true,
											buttons: [
												{ label: 'Button 1', style: 'primary' },
												'<button type="button" class="btn btn-dark" data-bs-dismiss="modal">Button 2</button>'
											],
											events: {
												shown: () => console.log('modal shown')
											}
										});

										myModal.addButton({ label: 'Button 3', style: 'danger' }, true);
										myModal.addEvent('hidden', () => console.log('modal hidden'));
										myModal.show();

Centered progress indicator without header/footer

									
										const progress = new modbox({
											id: 'modal-progress',
											title: null,
											backdrop: 'static',
											center: true,
											defaultButton: false,
											destroyOnClose: true,
											body: `
												<p>Loading the thing...</p>
												<div class="progress" style="height: 20px;">
													<div class="progress-bar" style="width: 0;"></div>
												</div>
											`,
											// logic set up for this example - you would handle updating the progress bar elsewhere
											events: {
												shown: () => {
													const bar = progress.modalEl.querySelector('.progress-bar');
													let percent = 0;

													const updateProgress = (interval) => {
														percent += 25;
														bar.setAttribute('style', `width: ${percent}%;`);
														bar.innerText = `${percent}%`;

														if (percent >= 100) {
															clearInterval(interval);

															setTimeout(() => {
																progress.hide();
																modbox.success('Loading complete!');
															}, 800);
														}
													};

													const interval = setInterval(() => {
														updateProgress(interval);
													}, 800);
												}
											}
										});

										progress.show();

Login dialog

									
										const loginBody = `
											<form>
												<div class="input-group mb-3">
													<span class="input-group-text"><i class="fas fa-at"></i></span>
													<input type="email" class="form-control" id="login-user" placeholder="Email">
												</div>
												<div class="input-group">
													<span class="input-group-text"><i class="fas fa-key"></i></span>
													<input type="password" class="form-control" id="login-pass" placeholder="Password">
												</div>
											</form>
										`;

										const login = new modbox({
											id: 'modal-login',
											title: 'Login',
											style: 'info',
											center: true,
											size: 'sm',
											destroyOnClose: true,
											body: loginBody,
											buttons: [{
												label: 'Log In',
												style: 'primary',
												icon: 'fas fa-sign-in-alt',
												close: false,
												callback: (event, modal) => {
													/* handle login logic */
													modal.hide();
												}
											}, {
												label: 'Cancel',
												icon: 'fas fa-times'
											}]
										});

										login.show();

YouTube Embed

									
										const vidModal = new modbox({
											title: 'Viva La Dirt League!',
											size: 'lg',
											show: true,
											destroyOnClose: true,
											body: '<iframe width="766" height="430" src="https://www.youtube.com/embed/7VZhH66ZeYE" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
										});

										vidModal.show();