3

I'm using bootstrap 1.4.0 and jquery 1.7.2. I'm trying to create a modal window with fading background. The modal window should be loaded using javascript function.

Here's the code I have:

<!-- Modal -->
<div id="error-dialog" class="modal hide fade">
  <div class="modal-body">
    <h1 class="exp-heading">Error</h1>
    <p class="exp-para pad-btm"> {$meta.message}</p>
    <!-- apps go here -->
    <div class="clear"></div>
    <!-- apps end here --> 
  </div>
  <div class="modal-footer"  align="center"><a href="#" data-controls-modal-close="error-dialog" ><img src="images/cancel_btn.png" alt="" border="0" align="middle" /></a> </div>
</div>

<script language="Javascript">  
$('#error-dialog').modal('show');                                                                   
</script>

The modal is showing but the background is not fading in. The CSS file is the default one 1.4.0/bootstrap.css

merv
  • 67,214
  • 13
  • 180
  • 245
KennyPowers
  • 4,925
  • 8
  • 36
  • 51
  • 2
    I don't know, but I'd stick with [Bootstrap 2.1.0](http://twitter.github.com/bootstrap/javascript.html#modals) and follow their docs. – moonwave99 Aug 26 '12 at 11:26
  • What browser are you testing on? The Modal plugin (1.4 or 2.x) uses CSS3 transitions, so if your browser doesn't support them (e.g. IE9), you're not going to see a fade. Otherwise, I also endorse @moonwave99's sentiment - try to use at least 2.x. They've made significant improvements to the modal in particular since 1.4. – merv Aug 26 '12 at 18:51
  • Chrome 21. The thing is I can't change the bootstrap version, I'm not the right person in the team who can do that :-/ – KennyPowers Aug 27 '12 at 06:38
  • Kenny, do you mean you want a fade effect for the backdrop? Anyway, I agree with merv and moon – GaryP Aug 27 '12 at 08:09
  • Gary, yeah. That's what I meant – KennyPowers Aug 27 '12 at 13:12

1 Answers1

0

I'm not sure but if you are trying to fade in the image you need to utilize the 

.fadeIn()

method

Rosie
  • 195
  • 2
  • 6