Simple dialogs based on Bootstrap 5 modal

Lightweight pure js dialogs library, min ad gz size less 2 kB

Dependencies

• bootstrap 5

demo

Dialogs

ok_cancel

let ret = await new BsDialogs().ok_cancel('header', 'body')

// ret = 'ok' || 'cancel' || undefined - if press close button

Options

new BsDialogs(options)

// default values
let options = {
    centered: true,
    backdrop: 'static',
    keyboard: true,
    focus: true,
    close: true,  // show close button
    size: '',
    fullscreen: null,
    scrollable: false
}

size: '' || 'sm' || 'lg' || 'xl'
more details

fullscreen: null || '' || 'sm-down' || 'md-down' || 'lg-down' || 'xl-down' || 'xxl-down'
more details

backdrop, keyboard, focus: more details

yes_no

let ret = await new BsDialogs().yes_no('header', 'body')

// ret = 'yes' || 'no' || undefined - if press close button

ok

let ret = await new BsDialogs().ok('header', 'body')

// ret = 'ok' || undefined - if press close button

custom

let ret = await new BsDialogs().custom(
    'header', 'body',
    [['Abort', 'btn-secondary', 'abort'], ['Yes', 'btn-primary', 'yes']]
)
// ['Abort', 'btn-secondary', 'abort']
//  title      btn class     ret value

// ret = 'abort' || 'yes' || undefined - if press close button

btn class: more details

Form

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>`
// !!! do not forget to put in the fields data-name="..."

let dlg = new BsDialogs()
dlg.form('header', 'Send', frm)
let ret = await dlg.onsubmit()
console.log(ret)  // {email: test@test.com}

If you want to further validate the values before submitting the form data, you should do the following:

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>`
// !!! do not forget to put in the fields data-name="..."

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