Create Bootstrap 5 Modals Programmatically With JavaScript – bs_dialogs.js

Preview:

Description:

Just another JavaScript library that allows you to dynamically create modal dialogs using Bootstrap 5’s Modal component.

See Also:

1. 10 Best JavaScript Dialog Plugins To Create Advanced Popup Boxes

How to use it:

1. Insert the bs_dialogs.js JavaScript after loading the latest 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 basic alert modal.

// with OK/Cancel buttons
let ret = await new BsDialogs().
ok_cancel('Dialog Header', 'Dialog Body');
console.log(ret);

// with Yes/No buttons
let ret = await new BsDialogs().
yes_no('Dialog Header', 'Dialog Body');
console.log(ret);

// With OK button
let ret = await new BsDialogs().
ok('Dialog Header', 'Dialog Body');
console.log(ret);

3. Replace the default action buttons.

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

4. Create a prompt 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>
  </div>
</form>`
 let dlg = new BsDialogs()
dlg.form('header', 'Send', frm)
while (true) {
    let ret = await dlg.onsubmit(true)
    if (ret === undefined) { // if close
        break
    }
    if (ret['email'].slice(-4) === '.com') {
        // we carry out the necessary actions
        break
    } else {
        await new BsDialogs().ok('Enter the correct value', 'Only .com domain!')
    }
}
dlg.close()

5. Config the modal dialog by passing the following options to the BsDialogs() method. See Bootstrap 5 Modal Component for more details.

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
})