ExtendedBootstrapModal
Overview
Extended Bootstrap Modal is a simple Javascript plugin enables you to generate a complex bootstrap modal without any HTML code.
Requirements
- Jquery 1.10 or higher.
Installation
<!-- Import Jquery --> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <!-- Import Bootstrap --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Import Extended bootstrap modal plugin --> <script src="plugin/extendedBootstrapModal.js"></script> How to use it
Simple modal
You can simply use the plugin without any parameters, it will generate a simple and classic bootstrap modal with the given text, and a close button.
This is an elegant way to replace the old Javascript Alert, and this is as simple as it.
Sample
ExtendedBoostrapModal('Simple modal without any parameters'); 
Modal state
You can specify a modal state to change the header color :
- success
- warning
- danger
- info
- primary
Complex modal
The plugin become a powerfull tools when you want to generate complex modal with many HTML components.
- No HTML code
- Many modals on the same page without duplicate code
- Possibility to to add a form with inputs, radio button, checkbox and dropdown list
- Add Bootstrap row with many columns
- Easily customizable
Autoload modal with text
ExtendedBoostrapModal({ autoload: true, id: 'my-modal', title: 'Sample modal' }); Modal with simple form
You can add an HTML form by using addForm parameter with id, name, and a list of HTML tags. If you use it, you have to manually define a collection of buttons (at least one for closing).
You can define a callback on each button by using callback parameter, and add parameters with arguments.
ExtendedBoostrapModal({ autoload: true, id: 'my-modal', title: 'Sample modal', addForm: { id: 'form_id', name: 'form_name', inputs: { label: 'textInput', list: [ { id: 'input_id', name: 'input_name', type: 'text', value: '', placeholder: 'my text input' } ] }, buttons: [ { value: 'Cancel', type: 'button' }, { name: 'btn_add', value: 'Validate', type : 'button', class: 'btn-success', callback: 'my_callback_fct', arguments : ['arg1', 'arg2'] } ] } }); function my_callback_fct(arg1, arg2) { } 
Modal with complex form
You can add the following components :
- Input text (with or without pattern)
- Radio button
- Checkbox
- Select
Each component works the same way : you just have to add a node with a name and a tags list.
Input text
inputs: { label: 'input1', list: [ { id: 'input_id1', name: 'input_name1', type: 'text', value: '', placeholder: 'my first text input' }, { id: 'input_id2', name: 'input_name2', type: 'text', value: '', placeholder: 'my second text input with pattern', pattern: '.{5,}' // Pattern example, contain 5 or more characters } ] } Radio button
/!\ You have to use the same name for each radio if you want to linked them
radios : { label : 'radios', list: [ { name: 'radio_name', value: 'choice_1', content: 'Choice 1', checked: true }, { name: 'radio_name', value: 'choice_2', content: 'Choice 2' } ] } Checkbox
checkboxs : { label : 'checkboxs', list: [ { name: 'check1', content: 'Choice 1' }, { name: 'check2', content: 'Choice 2' } ] } Select
selects: { label : 'selects', list : [ { name:"myList", options : [ { name: 'opt1', value: 'Option 1' }, { name: 'opt2', value: 'Option 2', selected: true }, ], } ] } Complete sample
Here is a complete sample you can use to build your proper modal.
ExtendedBoostrapModal({ autoload: true, id: 'my-modal', title: 'Sample modal', addForm: { id: 'form_id', name: 'form_name', inputs: { label: 'textInput', list: [ { id: 'input_id', name: 'input_name', type: 'text', value: '', placeholder: 'my text input' } ] }, buttons: [ { value: 'Cancel', type: 'button' }, { name: 'btn_add', value: 'Validate', type : 'button', class: 'btn-success', callback: 'my_callback_fct', arguments : ['arg1', 'arg2'] } ], radios : { label : 'radios', list: [ { name: 'radio_name', value: 'choice_1', content: 'Choice 1' }, { name: 'radio_name', value: 'choice_2', content: 'Choice 2' } ] }, checkboxs : { label : 'checkboxs', list: [ { name: 'check1', content: 'Choice 1' }, { name: 'check2', content: 'Choice 2' } ] }, selects: { label : 'selects', list : [ { name:"myList", options : [ { name: 'opt1', value: 'Option 1' }, { name: 'opt2', value: 'Option 2', selected: true }, ], } ] } } }); 
