Easy Bootstrap 4 Modal Creator With jQuery - modal_maker

Yet another Bootstrap modal maker plugin that makes it easier to programmatically create custom Bootstrap 4 modal windows on the webpage.

How to use it:

1. Download and insert the main JavaScript file modal_maker.js after jQuery & Bootstrap 4.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="modal_maker.js"></script>

2. Create a trigger element to toggle the modal window.

<button type="button" class="btn btn-primary" id="basic">Basic</button>

3. Call the function on the trigger element to activate the plugin.

$('#basic').modal_maker();

4. Customize the modal content with the following options.

$('#basic').modal_maker({
  modal_id             : 'modal_maker',
  modal_size            : '',
  modal_label           : 'modalLabel',
  modal_title           : 'modalTitle',
  modal_body            : 'modal body',
  modal_body_class      : '',
  modal_footer          : '<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>',
  modal_footer_class    : '',
  modal_dialog_centered : false,
});

// or
$('#basic').modal_maker('set_OPTIONNAME', VALUE)

5. Event handlers.

$('#basic').modal_maker({
  show_bs_modal : function( event, modal ){      
    // var button = $(event.relatedTarget) // Button that triggered the modal
    // var recipient = button.data('whatever') // Extract info from data-* attributes
    // var modal = $(this)
  },
  hidden_bs_modal : function( event, modal ){      
    // var button = $(event.relatedTarget) // Button that triggered the modal
    // var recipient = button.data('whatever') // Extract info from data-* attributes
    // var modal = $(this)
  }
});

---

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