Twitter bootstrap: modal fade

Question

I have a problem with twitter bootstrap motive ...

It works fine when I don't have a .fade class for my element. As soon as I add it, the modal does not appear.

I tracked the problem down to this line, I think:

doAnimate ? this.$backdrop.one(transitionEnd, callback) : callback() 

doAnimate webkitTransitionEnd , this looks great. But I think transitionEnd never starts because I'm trying to write something in a callback, and it never registers.

Any ideas?

---

EDIT: some code

Link:

 <a href="/events/2-fefewfewfe/rsvps" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true">I'm attending!<span class="ico join"></span></a> 

Modal (works without the fade class without adding it)

 <div id="event-modal" class="modal hide fade"></div> 

css:

 .modal.fade { -webkit-transition: opacity .3s linear, top .3s ease-out; -moz-transition: opacity .3s linear, top .3s ease-out; -ms-transition: opacity .3s linear, top .3s ease-out; -o-transition: opacity .3s linear, top .3s ease-out; transition: opacity .3s linear, top .3s ease-out; top: -25%; } 

Did I miss something?

---

Thanks.

Answer 1

Although this was accepted, the information in this answer was incorrect, so I deleted the original answer to prevent confusion. Here's a jsFiddle working demo with fade http://jsfiddle.net/sfWBT/880/

Edited to provide an updated link since the previous jsFiddle did not work, and I can no longer add jsFiddle without code. So here is the code:

HTML:

 <div id="event-modal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a class="close" href="#">x</a> <h3>Modal Heading</h3> </div> <div class="modal-body"> <p>Some information</p> </div> <div class="modal-footer"> <a class="btn primary" href="#">Primary</a> <a class="btn secondary" href="#">Secondary</a> </div> </div> </div> </div> 

JS:

 $(function() { $('#event-modal').modal({ backdrop: true }); }); 

Answer 2

I had the same problem. I tried to use bootstrap in an existing project, and since many class names came up against my own class names, I recompiled bootstrap.css with the .tbs namespace. In a modular window plugin, a document element is added to document.body. Since the modal background was not in my .tbs namespace, the css fade selector was not applied. Thus, the transition never occurred, and therefore the callback function never started. I fixed it by changing

 this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />').appendTo(document.body) 

to

 this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />').appendTo($('.tbs')[0]) 

Answer 3

I had the same problem as I wanted to use parts of the twitter framework.

These are the CSS styles that are missing in your Robin case. For the modals to work correctly you need to include the rules from the file "component-animations.less".

this will allow the modules to work with the .fade class added to them.

Answer 4

try the following jquery in one of your js files, you will need a "closed" class inside you modal / alert

for warning boxes

 $(".alert .close").click( function() { $(this).parent().addClass("fade"); }); 

or for modals (may differ depending on your nesting of elements)

 $(".modal .modal-header .close").click( function() { $(this).parent().parent().addClass("fade"); }); 

Answer 5

You should use a plugin that brings modal behavior, this is the jQuery plugin from Twitter. For a link to this script: http://twitter.github.com/bootstrap/javascript.html#modal

Also make sure that you are using the correct part of HTML (it is not shown on the page). Source code of this link:

 <div class="modal hide fade" id="modal-from-dom"> <div class="modal-header"> <a class="close" href="#">×</a> <h3>Modal Heading</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <a class="btn primary" href="#">Primary</a> <a class="btn secondary" href="#">Secondary</a> </div> </div> 

Please note that the in class that @ChristianVarga offers is automatically added by the modal plugin. You should only initialize the plugin as indicated in the documentation.

Answer 6

The problem for me was the same as @sleepysamurai that I had names on which the bootstrap file was uploaded, and that violates the modalities. I fixed it by changing .css, not .js, since it is already "configured". In particular (for Bootstrap 2.3.2, namespaced in bootstrap-container ):

• Find / replace all .bootstrap-container .modal- and replace with .modal- .
• Find / replace all .bootstrap-container .fade and replace with .fade .

In other words, un-namespacing modal and vanishing rules fixed the problem.