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

Overview

Dynamic BS5 Modal Box

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

Install

<!-- Bootstrap 5 CSS -->
<link 
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" 
crossorigin="anonymous">

<!-- Bootstrap 5 JS -->
<script 
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>

<!-- Dynamic Modal JS -->
<script src="modal-with-custom-action.js"></script>

Usage

// showModal(title, description, yesBtnLabel = 'Yes', noBtnLabel = 'Cancel', callbackAfterClickingYesBtn);
document.getElementById('btn1').onclick = () => showModal('File Deletion', 'Do you want to delete this file?', "Yes", "No", () => {
    console.log('File deleted successfully');
});

screenshot

You might also like...

Default Description set by probot/settings

sanity-typed-schema-builder Build Sanity schemas declaratively and get typescript types of schema values for free! Typescript types for Sanity Values!

Jan 3, 2023

A basic USDZ file (Pixar Universal Scene Description) loader for ThreeJS

Three USDZ Loader A basic USDZ (binary Universal Scene Description) reader for Three.js The plugins supports animation as well as loading multiple USD

Dec 13, 2022

Create a HTML table from JSON that can be sorted, selected, and post-processed using a simple callback.

Create a HTML table from JSON that can be sorted, selected, and post-processed using a simple callback.

Tidy Table Create a HTML table from JSON that can be sorted, selected, and post-processed using a simple callback. Features Extensible HTML/CSS interf

Aug 16, 2022

Multiple Selection Combo Box using Bootstrap 3

MagicSuggest v2.1.6 Bug Fix (fix) Disabled arbitrary HTML and SCRIPT execution on input. MagicSuggest v2.1.5 (fix) prepend close button instead of app

Dec 22, 2022

Dialogs based on Bootstrap 5 modal

Dialogs based on Bootstrap 5 modal

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_cance

Oct 29, 2022

A SolidJS starter template with solid-labels, solid-sfc and solid-styled

solid-sfc-styled-labels-starter This is a SolidJS starter template for easily setting up solid-sfc, solid-styled and solid-labels. Development Install

Mar 25, 2022

GitHub action to automate managing repositories with labels, milestones and projects.

triagecat GitHub action to automate managing repositories with labels, milestones and projects. Link issues and PRs labels. Add issues and PRs to a pr

Jun 14, 2022

Build forms from JSON Schema. Easily template-able. Compatible with Bootstrap 3 out of the box.

JSON Form The JSON Form library is a JavaScript client-side library that takes a structured data model defined using JSON Schema as input and returns

Dec 28, 2022

Dropdown select box for bootstrap 5

dselect Dropdown select box for bootstrap 5 Demo Features Placeholder Multiple Search Creatable Clearable Sizing Validation Installation Install dsele

Dec 21, 2022
Owner
📱Next | Vue | Svelte ⛅PHP 🎨MUI | Bootstrap | Adobe XD 💔Python | C/C++ | Java | Elasticsearch | MySQL
null
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
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
Kuldeep 2 Jun 21, 2022
HTML page to show yes to questions like isSleeping, isCovidPositive, isDrinkingTea using sheetDB

is-doing-x.user.domain The ideal way to use yes is to fork this repo and host it on <activity>.<domain>, and make a Google Sheet Tab with name domain

Aashutosh Rathi 1 Jan 27, 2022
This is a Microverse (@microverseinc) project in which I created a To-do list using Webpack. User can add a task, delete it, edit its description, and clear the completed tasks.

Microverse To-Do list This is a Microverse (@microverseinc) project in which I created a To-do list using webpack. Requirements Build a Todo list usin

Manel Hammouche 11 Aug 3, 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
well yes, but can you do it in types?

Yes, but can you do it in types? A collection of challenges which you complete in solely the type system. Everyone knows you can write code to do thin

catgirlkelly 11 Oct 27, 2022
My terrible attempt at a promposal. Update: She said yes LMFAO Update Update: I got friendzoned right after 😭

TypeScript Next.js example This is a really simple project that shows the usage of Next.js with TypeScript. Deploy your own Deploy the example using V

John Li (Tet) 7 Oct 27, 2022
Labels issues using OpenAI's Classification API powered by GPT-3 models!

OpenAI Issue Labeler ?? This GitHub action labels issues using OpenAI's Classification API powered by GPT-3 models! We are using curie as our completi

Austen Stone 11 Dec 21, 2022