codler/jQuery-Css3-Finalize

Conflicts with bootstrap's modal abilities

lavaeagle opened this issue · 6 comments

When I have a standard modal with Twitter's bootstrap I can't open the modal. I narrowed it down to the 'hide' class on the modal itself.

The backshadow shows when clicked but not the modal. When I take off hide the modal shows immediately but that's not the behavior we want.

Bootstrap.css 2.1
bootstrap.js 2.1
jQuery - 1.7.2
jQuery UI - 1.8.21
Chrome: 21
CSS3Finalize: 3.0

<-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<-- Modal -->
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <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>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

What version of CSS3finalize, jQuery and Bootstrap are you using?

Can't believe I didn't include that my bad.

Bootstrap.css 2.1
bootstrap.js 2.1
jQuery - 1.7.2
jQuery UI - 1.8.21
Chrome: 21
CSS3Finalize: 3.0

cdnjs.cloudflare.com/ajax/libs/css3finalize/3.0/jquery.css3finalize.min.js

This issue is related to issue #15. The solution described in #15 was to use the latest version of jQuery, but that doesnt look it works anymore. That is a bug in jQuery so I have filled a ticket to jQuery http://bugs.jquery.com/ticket/12476
The other solution is to remove the word " display" on this row
https://github.com/codler/jQuery-Css3-Finalize/blob/v3.0/jquery.css3finalize.js#L458

CSS3Finalize 3.1 fixes this.

I did a little digging on cdnjs and found they have the most updated version but aren't listing it.
http://cdnjs.cloudflare.com/ajax/libs/css3finalize/3.1/jquery.css3finalize.min.js

It takes some hour before they update their cdn. But I can see it now.