Dialogs based on Bootstrap 5 modal

Overview

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

You might also like...

A Simple yet extendable jQuery modal script built for use with inline HTML, images, videos, and galleries.

jQuery Chaos Modal A Simple yet extendable jQuery modal script built for use with inline HTML, forms, and images in mind. There are many other modal p

Oct 8, 2020

Modal Video Library

Modal Video Modal Video Library Features Not affected by dom structure. Beautiful transition Accessible for keyboard navigation and screen readers. Ri

Nov 30, 2022

Simple to use and manage modal.

vue-modal-provider nice-modal-react vue implementation. Simple to use and manage modal. benefit: Create modal without losing context No need to mainta

Nov 10, 2022

BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework

BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework

BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.

Dec 25, 2022

jQuery tags input plugin based on Twitter Bootstrap.

Bootstrap Tags Input Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags. Current stable version: v

Dec 21, 2022

A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js, that is based on Dan Grossman's bootstrap-daterangepicker.

A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js, that is based on Dan Grossman's bootstrap-daterangepicker.

vanilla-datetimerange-picker Overview. A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js,

Dec 6, 2022

Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máximo de criatividade possível😜

Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máximo de criatividade possível😜

Steck Cars Demonstração : Sobre Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máxi

Jan 10, 2022

Bootstrap plugin for markdown editing

Bootstrap Markdown Markdown editing meets Bootstrap. Demo and documentation available at http://toopay.github.io/bootstrap-markdown/ Compatibility Ver

Dec 27, 2022

Bootstrap an NFT minting site with Merkle tree whitelists.

🖌️ nft-merkle-whitelist-scaffold Bootstrap an NFT minting site with merkle tree whitelists. Go to nft-merkle-whitelist.vercel.app to see the latest d

Dec 24, 2022
Owner
Alexander
Alexander
Lightweight vanilla js modal component (just 2kb) , pure javascript Modal

Lightweight vanilla js modal component (just 2kb) pure javascript Modal , This is just 2kb Lightweight vanilla js modal component with zero dependenci

Salah Eddine Lalami 12 Dec 12, 2022
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Dynamic BS5 Modal Box Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback Insta

null 5 Oct 23, 2022
A javascript framework for developing pretty browser dialogs and notifications.

AlertifyJS AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications. AlertifyJS is an extreme makeover of alertify

Mohammad Younes 2k Jan 2, 2023
A beautiful, responsive, highly customizable and accessible replacement for JavaScript's popup boxes. Zero dependencies.Alerts ,dialogs

AsgarAlert (v1) for JS Install <script defer src="/asgar-alert.js"></script> Examples The most basic message: asgar("Hello world!"); A message signali

Asgar Aliyev 5 Dec 20, 2022
Design-focused web3 modal based on Material UI

@buildship/web3-login (beta) This is a design-focused web3 wallet connecting modal for React based on Material UI. It supports Metamask, WalletConnect

Buildship 25 Jan 1, 2023
Promise-based utility to control modal states in React

Promise-based utility to control modal states in React Zero-dependency library that easily integrates with your existing UI components and allows you

Thiago Zanivan 8 Dec 5, 2022
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Bootstrap Colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10

Javi Aguilar 1.4k Dec 22, 2022
Accessible, lightweight, stylish modal library in pure JavaScript

accessible-minimodal Accessible, lightweight (< 8 kB), stylish modal library in pure JavaScript Example https://codepen.io/imhvost/pen/LYNazqo (with "

Oleksandr Marchuk 3 Aug 4, 2022