CODEWITHSUNDEEP
twitter-bootstrapmodal-dialog
Ashish singhi
Ashish singhi

Reputation: 345

Twitter Bootstrap modal is not working in IE7

<div class="modal hide" id="modalId">
  <div class="modal-header" style="padding:30px 10px">
    <h3 style="float:left">Some text here</h3>
    <input type="image" src="image_path" alt="loading..." class="pull-right" />
  </div>
  <div class="modal-body" style="clear:both">
    <!-- I have a table here-->   
  </div>
  <div class="modal-footer">
     <!-- I have a button here -->
  </div>
</div>

code for the modal which will be called on button click

$('#modalId').modal({
    backdrop: 'static',
    keyboard: false,
    show: true
});

Here The problem I am facing is, in fornt of modal pop up a black window is coming.

This works perfectly in firefox, IE 8 but not in IE7.

I tried a lot but could not find the problem here. :( Can some one please have a look into it. thubjsdaps14

Upvotes: 3

Views: 8260

Answers (2)

Ashish singhi
Ashish singhi

Reputation: 345

I have commented the following line in bootstrap.js

appendTo(document.body)

and added

.insertAfter(this.$element)

For more details refer to https://github.com/twitter/bootstrap/issues/3217

Now it is working properly in IE7.

Upvotes: 11

Terry
Terry

Reputation: 14219

I would suggest getting the basic modal to work first, you have some CSS in your that may be causing issues (the clear: both stands out).

Try this and see if it works:

<div class="modal" id="modalId">
  <div class="modal-header">
    <h3>Test header</h3>
  </div>
  <div class="modal-body" style="clear:both">
    Test body 
  </div>
  <div class="modal-footer">
     Test footer
  </div>
</div>

$('#modalId').modal();

Upvotes: 1

Related Questions