Description

A simple plugin to create a bootstrap modal easier.

This plugin is based on Bootstrap modal component and JQuery.

Requirements

• JQuery
• Bootstrap v4.1.0+

Demos

demo 1

Simeple usage.

// set #demo1 button
$('#demo1').modal_maker()

demo 2

Customize modal title.

Bootstrap modal title default HTML tag is H5

// customize #demo2 modal title
$('#demo2').modal_maker({
    modal_title : 'customize demo 2 title'
})
// or 
$('#demo2_1').modal_maker()
$('#demo2_1').modal_maker('set_modal_title','demo2 title')

demo 3

Customize modal body.

// customize #demo3 modal body
$('#demo3').modal_maker({
    modal_body : 'customize modal body'
})
// or 
$('#demo3_1').modal_maker()
$('#demo3_1').modal_maker('set_modal_body','<h1>this is modal body</h1>')

demo 4

Customize modal footer.

// customize #demo4 modal footer
$('#demo4').modal_maker({
    modal_footer : '<button type="button" class="btn btn-primary">footer button</button>'
})
// or 
$('#demo4_1').modal_maker()
$('#demo4_1').modal_maker('set_modal_footer','<button type="button" class="btn btn-primary">footer button</button>')
// or 
var modal_4_footer_btn = $('<button type="button" class="btn btn-primary">footer button</button>')
    .on('click', function(){
        $('#demo4_2').modal_maker('modal_hide')
    })
$('#demo4_2').modal_maker()
$('#demo4_2').modal_maker('set_modal_footer', modal_4_footer_btn)

Basic usage

// customize #demo5 
var modal_5_body = $('<input type="text" class="form-control">')
var modal_5_footer_btn =  $('<button type="button" class="btn btn-primary">footer button</button>')
    .on('click', function(){
        $('#demo5').modal_maker('modal_hide')
    })
$('#demo5').modal_maker({
    modal_body : modal_5_body,
    modal_footer : modal_5_footer_btn,
    hidden_bs_modal : function( event, modal ){   
        modal.find('input').val('')
    }
})

Advanced usage

Please read Bootstrap modal component for more advanced usage.

License

Released under the MIT license.