Bootstrap Modal - show does not remove hide attribute

Question

I am creating a Bootstrap 2.3.1 modal as follows:

myModal = $('<div/>', {
   'class': 'modal hide',
   'id': id + '-addModal',
   'tabindex': -1, // needed for escape to work...
   'role': 'dialog',
   'data-backdrop': 'static'
   }).append(content);


// insert Modal into DOM...
$(jqElement).after(myModal);

// focus on first input when it pops up...
myModal.on('shown', function () {
    myModal.find('select:first').focus();
   });

// in response to button click... myModal.modal('show');

On rare occasions, the backdrop shows, but no modal is displayed. Has anyone encountered a similar problem and a workaround? I am aware IE8 does not like animated modals (use of fade class) and this doesn't appear to be the same issue as we don't use fade. The issue appears in FF, Chrome and IE, but like the Spanish Inquisition, never when I'm expecting it.

The failure appears to be within the modal('show') execution. It seems that the modal exists but is not unhidden. I believe this should be achieved by adding the in class to the modal. The show and shown events do occur however. From looking at the bootstrap code, the fact that the shown event occurs means that the event is not prevented from default behaviour.

Note This is a question similar to one I posted earlier, but I have added some more information concerning how it fails.

Please also note that I cannot update to Bootstrap 3. I am responsible for making small changes to an already released product and a change of basic libraries is a non-starter.

Nasia

@Elfayer well upvote my question so it gets more attention! :-) – Nasia

Answer 1

I found the following issues helped:

a) The 'shown' action of the modal checks for a display:block attribute and forces it to be set.

b) the close button (which needed to do validation) was set to a click event - changing this to a delegated event made it work reliably

c) both the cancel buttons were mapped to the modal-dismiss action.

myModal.on('show', function (event) {
    self._debug("show modal");

    // show add form - should be a modal
    myModal.find('form')[0].reset();
    myModal.find('.alerts').empty();
    self._debug('show end');
    return true;
});

myModal.on('shown', function () {
    var $el = $('#myModal');
    if ($el.css('display') == 'none') {
       self._debug(" WARNING! modal css error");
    }
    self._debug("fix for bootstrap error");
    $el.css('display', 'block');
    myModal.find('select:first').focus();
    self._debug('Shown modal');
    return true;
 });

myModal.on('hide', function () {
    self._debug('Hide modal');
    return true;
});

myModal.on('hidden', function () {
  var $el = $('#myModal');
  $el.css('display', 'none');
  self._debug('Hidden modal');
  return true;
        });

Nasia

Answer 2

I've modified the code and appended to the body instead of the unknown jqElement specified in your example. I've also added some example place holder content. See the following JS Fiddle for a working example http://jsfiddle.net/kYVtf/5/

var id = 'test',
content = '<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p><select><option>TEST</option></select></p></div>  <div class="modal-footer">    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>    </div>';

var myModal = $('<div/>', {
    'class': 'modal hide fade',
    'id': id + '-addModal',
    'tabindex': -1, // needed for escape to work...
    'role': 'dialog',
    'data-backdrop': 'static'
}).html(content);


// insert Modal into DOM...
$('body').append(myModal);

// focus on first input when it pops up...
myModal.on('shown', function () {
    myModal.find('select:first').focus();
});

Zayin

Thank you v much - please change your example to use jQuery 1.8.3. – Nasia

My example now uses 1.8.3. Is this the result you were looking for? – Zayin

I've solved it and put what I think is happening below. – Nasia

Answer 3

This behaviour started happening for me after I added the following to prevent unhandled modal closure.

$('.modal').modal({
    backdrop: 'static',
    keyboard: false
});

I fixed it by adding show: false to the modal options and making sure there was no hide class in <div class="modal fade"

Pressman