title: Unable To Close Bootstrap Modal With Fade
body: <p>I'm using the following code to dynamically generate my modal pop-ups but I encountered a problem. The problem is that the modal appears correctly but I am unable to close it. I've tried both <code>data-dismiss="modal"</code> and <code>.modal("hide")</code> with no avail. I've checked that the button click event gets fired, the only problem is that the modal doesn't close.</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>// Requires jQuery
  var dialogHelper = new dialog();
  
  function dialog() {
      /* Bootstrap Modal Dialog
      *  Displays message from parameter
      */
      this.ShowModalDialog = function (message, title, buttons) {
          var dialogMessage = "";
          var dialogTitle = "System Message";
          var dialogButtons = [];
  
          if (message)
              dialogMessage = message;
          if (title)
              dialogTitle = title;
          if (buttons) {
              dialogButtons = buttons;
          }
  
          var id = randomString(10);
  
          jQuery("&lt;div/&gt;", {
              id: id,
              class: "modal fade",
              // href: 'http://google.com',
              //title: title,
              //rel: 'external',
              //text: message
          })
              .attr("tabindex", "-1")
              .attr("role", "dialog")
              .attr("aria-labelledby", id + "Label")
              .attr("aria-hidden", true)
              .attr("data-backdrop", "static")
              .attr("data-keyboard", false)
              .load("/Static/BootstrapDialogTemplate.html", function () {
                  $("#" + id + " .modal-title")
                      .attr("id", id + "Label")
                      .text(dialogTitle);
                  $("#" + id + " .modal-body").text(dialogMessage);
  
                  var footer = $("#" + id + " .modal-footer");
  
                  dialogButtons.forEach(function (element) {
                      $('&lt;button/&gt;', {
                          text: element.Text,
                          click: function () {
                              if (element.Event) {
                                  element.Event();
                              }
                          },
                          class: element.Class
                      })
                          .attr("data-dismiss", "modal")
                          .appendTo(footer);
                  });
              })
              .appendTo(document.body)
              .modal("show");
      };
  };
  
  /* Automatically destroy modal on close */
  $(".modal").on('hidden.bs.modal', function () {
      $(this).data('bs.modal', null);
  });
  
  function randomString(length) {
      var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
      var string_length = length;
      var randomstring = '';
  
      for (var i = 0; i &lt; string_length; i++) {
          var rnum = Math.floor(Math.random() * chars.length);
          randomstring += chars.substring(rnum, rnum + 1);
      }
  
      return randomstring;
  };
  </code></pre>
  
  <p><strong>/Static/BootstrapDialogTemplate.html</strong></p>
  
  <pre><code>&lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h5 class="modal-title"&gt;&lt;/h5&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Sample Call</strong></p>
  
  <pre><code>dialogHelper.ShowModalDialog("Are you sure you want to create this item?", null, [{
          Text: "Yes",
          Event: function () { alert("YES!"); },
          Class: "btn btn-primary"
      }, {
          Text: "No",
          Event: function () { },
          Class: "btn btn-secondary"
      }]);
  </code></pre>
  
  <p><strong>Sample Output</strong></p>
  
  <pre><code>&lt;div id="2tF5r5mecT" class="modal fade show" tabindex="-1" role="dialog" aria-labelledby="2tF5r5mecTLabel" data-backdrop="static" data-keyboard="false" aria-modal="true" style="display: block;"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h5 class="modal-title" id="2tF5r5mecTLabel"&gt;System Message&lt;/h5&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;×&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;Are you sure you want to create this item?&lt;/div&gt;
              &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-primary" data-dismiss="modal"&gt;Yes&lt;/button&gt;&lt;button class="btn btn-secondary" data-dismiss="modal"&gt;No&lt;/button&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="modal-backdrop fade show"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/uQSAN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uQSAN.png" alt="enter image description here"></a></p>
  
  <p>Through random testing, I managed to deduce that removing the <code>fade</code> class when generating my modal allows me to close it without any other changes.</p>
  
  <p>From</p>
  
  <pre><code>jQuery("&lt;div/&gt;", {
          id: id,
          class: "modal fade",
          // href: 'http://google.com',
          //title: title,
          //rel: 'external',
          //text: message
      })
  </code></pre>
  
  <p>To</p>
  
  <pre><code>jQuery("&lt;div/&gt;", {
          id: id,
          class: "modal",
          // href: 'http://google.com',
          //title: title,
          //rel: 'external',
          //text: message
      })
  </code></pre>
  
  <p>And my code works but without the fade effects. I've checked all my custom CSS for <code>.fade</code> but I don't have any. There are no console errors on the browser when the issue persist. Have any of you encountered this issue? I've just upgraded to JQuery 3.3.1 and Bootstrap 4.2.1. It just feels weird when there is no fade effects.</p>
  
  <p><strong>PLUNKER</strong></p>
  
  <p><a href="https://next.plnkr.co/edit/71QNigcwmUombEQ8?open=lib%2Fscript.js&amp;preview" rel="nofollow noreferrer">https://next.plnkr.co/edit/71QNigcwmUombEQ8?open=lib%2Fscript.js&amp;preview</a></p>