Twitter bootstrap modal fondu noir

Question

J'utilise twitter bootstrap modal, quand je clique sur le lien, le fondu noir apparaît toujours sur le modal.

Pour votre information - https://docs.google.com/file/d/0B7s0BYiHsMBtY1pLdmVsclpQXzA/edit?usp=sharing

Voici mon code:

<ul class="nav pull-right"> 
     <li><a href="#myModal" data-target="#myModal" data-toggle="modal">Signin</a></li> 

    </ul> 
<div id="myModal" class="modal hide fade" 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> 

Answer 1

J'ai trouvé un exemple de travail here:

JSFIDDLE

REMARQUE: si vous voulez cacher le fondu noir il suffit de supprimer backdrop: true; de la jquery.

HTML:

<div id="event-modal" class="modal hide fade"> 
    <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> 
<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> 

JQUERY:

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

CSS:

#event-modal { 
    margin-top: 0; 
} 

Answer 2

Même code fonctionne bien pour moi .. Vérifiez vos fichiers JS ont été ajoutés correctement ou non.

Esp. bootstrap-modal.js, bootstrap-transition.js

contrôle une fois que ce violon:

http://jsfiddle.net/7vyUQ/

<ul class="nav pull-right"> 
     <li><a href="#myModal" data-target="#myModal" data-toggle="modal">Signin</a></li> 

    </ul> 
<div id="myModal" class="modal hide fade" 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> 

Answer 3

Cela ressemble question CSS. Vérifiez si quelque chose ne remplace pas votre propriété z-index modale, par défaut modal a:

.modal { 
    z-index: 1050; 
} 

et toile de fond:

.modal-backdrop { 
    z-index: 1040; 
} 

Modal devrait avoir une valeur plus élevée.