Simple Dialogs Based On Bootstrap 5 Modal | BsDialogs

Simple dialogs based on Bootstrap 5 modal is a lightweight pure js dialog library, minimum ad gz size is less than 2 kB. Just another JavaScript library that allows you to create modal dialogs dynamically using the Modal component in Bootstrap 5.

bootstrap 5 modal show, bootstrap 5 modal show jquery, bootstrap 5 modal example, bootstrap 5 modal popup

Create Bootstrap 4 Modals In Pure JavaScript | Bootstrap Show Modal

How to make use of it:

1. Insert the bs_dialogs.js JavaScript after loading the newest Bootstrap 5 framework.

<!-- BS 5 Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- JavaScript Bundle with Popper -->
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!– bs_dialogs –>
<script src=”bs_dialogs.js”></script>

2. Create a fundamental alert modal.

// with OK/Cancel buttons
let ret = await new BsDialogs().
ok_cancel('Dialog Header', 'Dialog Body');
// with Yes/No buttons
let ret = await new BsDialogs().
yes_no('Dialog Header', 'Dialog Body');
// With OK button
let ret = await new BsDialogs().
ok('Dialog Header', 'Dialog Body');

3. Replace the default motion buttons.

let ret = await new BsDialogs().custom('Dialog Header', 'Dialog Body',
      ['Show', 'btn-warning', 'show'],
      ['Abort', 'btn-secondary', 'abort'],
      ['Yes', 'btn-primary', 'yes']

4. Create an immediate dialog with value validation.

let frm = `<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" data-name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" required>
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
 let dlg = new BsDialogs()
dlg.form('header', 'Send', frm)
while (true) {
    let ret = await dlg.onsubmit(true)
    if (ret === undefined) { // if close
    if (ret['email'].slice(-4) === '.com') {
        // we carry out the necessary actions
    } else {
        await new BsDialogs().ok('Enter the correct value', 'Only .com domain!')

5. Config the modal dialog bypassing the next choices to the BsDialogs() technique. See Bootstrap 5 Modal Component for extra particulars.

new BsDialogs({
    centered: true,
    backdrop: 'static',
    keyboard: true,
    focus: true,
    close: true,
    size: '', // 'sm' || 'lg' || 'xl'
    fullscreen: null, // 'sm-down' || 'md-down' || 'lg-down' || 'xl-down' || 'xxl-down'
    scrollable: false

Create Bootstrap 5 Modals Programmatically, Simple dialogs based on Bootstrap 5 modal Plugin/Github

See Demo And Download

Official Website(atitoff): Click Here

This superior jQuery/javascript plugin is developed by atitoff. For extra Advanced usage, please go to the official website.

Related Posts


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Leave a Reply

Your email address will not be published. Required fields are marked *