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

1 comment: