Nested Customizable Modal Plugin For Bootstrap - bDialog

bDialog is a jQuery extension to enhance the default Bootstrap modal component that lets you create highly customizable, nested Bootstrap modal windows & dialog boxes. Supports both Bootstrap 3 and Bootstrap 2.

How to use it:

1. First you need to load jQuery library and Bootstrap framework in the document.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

2. Then load the jQuery bDialog plugin's files after jQuery.

<link href="b.dialog.bootstrap3.css" rel="stylesheet">
<link href="b.dialog.css" rel="stylesheet">
<script src="b.dialog.js"></script>

3. Optionally, load the jQuery UI library if you want to make the modal windows draggable and movable.

<script src="jquery-ui.min.js"></script>

4. The JavaScript to load an external page into the modal window.

bDialog.open({
  title : 'Basic Modal',
  width : 500,
  height : 450,
  url : 'https://www.jqueryscript.net'
});

5. Or load the code snippets within the document into the modal window.

<div id="innerContent" class="hide">
  <div>
    <h1 id="support" class="page-header">Modal Title</h1>
    <p class="lead">Modal Content Here</p>
  </div>
</div>

bDialog.open({
  title : 'Custom Content',
  width : 500,
  height : 450
},$('#innerContent').html());

6. More configuration options to customize the modal windows.

{

  // 'static', false, true
  'backdrop' : 'static', 

  // title
  'title' : 'Modal Title',

  // width
  'width' : 700,

  // height
  'height' : 400,

  // pass parameters to opened modal windows
  params: {},

  // enable animation
  'animation' : false,

  // shows close button
  'dialogCloseButton' : true,

  // shows fullscreen toggle button
  'dialogMaxButton' : true,

  // shows close button
  'closeButton' : false,

  // shows scrollbar
  'scroll' : true,

  // is draggable
  'drag' : true,

  // url to load
  'url' : false,

  // is full width
  'fullWidth' : false, 

  // additional CSS class
  'customClass' : undefined,

  // shows modal windows on page load
  'show' : false,

  // callbacks
  'onShow' : $.noop,
  'onShowed' : $.noop,
  'onHide' : $.noop,  
  'onHidden' : $.noop,
  'callback' : $.noop 

}

Change log:

2017-09-16

• JS update

---

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