Dynamic Bootstrap 4 Dialog & Modal Manager - jQuery bsWindow

bsWindow is a simple-to-use Bootstrap 4 modal manager which helps you dynamically create custom popup boxes & modal windows using Bootstrap 4 modal component.

How to use it:

1. The plugin requires jQuery library and Bootstrap 4 framework loaded properly in the document.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

2. Load the bsWindow's JavaScript after jQuery.

<script src="bswindow.js"></script>

3. Create an alert dialog with custom title, message and callback function.

bsWindow.alert('Alert message', 'Alert title', function() {
  console.log('Alert window closed.');
});

4. Create a confirmation dialog with custom title, message and callback function.

bsWindow.confirm('Confirm (Y/N)?', 'Confirm title', function(res) {
  bsWindow.alert('You answered: ' + (res ? 'OK' : 'Cancel'), 'Answer');
});

5. Create a prompt dialog with custom title, message, placeholder, and callback function.

bsWindow.prompt('Enter your name', 'superunknown', 'Who is it?!', function(res) {
  if (res == null) {
    bsWindow.alert('You declined to answer the question.');
    return;
  }
  bsWindow.alert('You answered: ' + res);
});

6. Create a custom modal popup with the following options.

bsWindow.show({
  title: 'A custom large window with buttons',
  message: '<p><input type="text" class="form-control winCustom" placeholder="Write here something." /></p>',
  animate: true,
  large: false,
  small: false,
  closeable: true,
  buttons: [
    {
      label: 'Close me',
      className: 'btn-primary',
      action: function(obj) {
        obj.close();
      } 
    },
    {
      label: 'Get value from the text field',
      className: 'btn-success',
      action: function(obj) {
        var val = $(obj.element).find('.winCustom:eq(0)').val();
        bsWindow.alert('The value is: ' + val);
      }
    }
  ]
});

7. Callback functions available.

bsWindow.show({
  onAppear: function() {},
  onDisappear: function() {}
});

---

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