Creating Dynamic Bootstrap Modals In jQuery - ExtendedBootstrapModal

Just another jQuery plugin to extend the Bootstrap modal component that makes it easy to create flexible, dynamic, complex modal windows in pure JavaScript.

How to use it:

1. To get started, you must have jQuery library and Bootstrap framework are loaded properly in the document.

<!-- Import Jquery -->
<script src="jquery.min.js"></script>

<!-- Import Bootstrap -->
<script src="bootstrap.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">

2. Download the plugin and then insert the JavaScript file extendedBootstrapModal.js after jQuery library.

<!-- Import Extended bootstrap modal plugin -->
<script src="extendedBootstrapModal.js"></script>

3. Create a basic modal window with just one line of JavaScript.

ExtendedBoostrapModal('A Basic Modal Window.');

4. Change the default theme of the modal window.

ExtendedBoostrapModal('A Basic Modal Window.',{
  state: 'success' // warning, danger, info, primary
});

5. Create a complex, dynamic form 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
                    },
                ],
            }
        ]
    }
  }
});

Changelog:

2018-06-13

• Add default value, and some fixes

---

This awesome jQuery plugin is developed by atogeek. For more Advanced Usages, please check the demo page or visit the official website.