Tuesday, January 29, 2013

Bootstrap Modal Double Backdrop

I recently had an issue where I was getting the modal-backdrop class applied twice, so I ended up with two overlays.

Symptoms

Upon calling .modal(), I ended up with a very dark background overlay. Dismissing the modal cause the overlay to lighten but remain. Clicking somewhere on the page or pressing ESC caused the overlay to vanish.

Method

This was occurring whenever I loaded the entire content of the modal with AJAX. Something like:


function makeModal(html) {
        var $modal = $(html);
        $('body').append($modal);
        $modal.modal();
    }

The problem is that html had a script tag present, so $modal.modal(); was actually being applied to the modal div and the script tag.

The Fix

You need to make sure you only apply modal() to the modal  div, like this:

function makeModal(html) {
        var $modal = $(html);
        $('body').append($modal);
        $modal.filter('.modal').modal();
    }

I found the answer to this problem via landon's post on this github issue: https://github.com/twitter/bootstrap/issues/679

2 comments:

  1. Nice. This solved my problem. Thanks!

    ReplyDelete
  2. I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.
    HTML5 courses in chennai

    ReplyDelete