ट्विटर बूटस्ट्रैप - मेरा मॉडल पृष्ठभूमि के रूप में फीका क्यों है?

Question

इसलिए मैं ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं और मेरे पास एक मॉडल है जो उपयोगकर्ता को "रजिस्टर" बटन पर क्लिक करता है।

एकमात्र समस्या यह है कि न केवल पृष्ठभूमि पृष्ठ फीका होता है, जो एक अच्छा प्रभाव है, लेकिन मोडल भी फीका हुआ है। मैं इसे कैसे प्राप्त कर सकता हूं ताकि पृष्ठभूमि सामान्य हो, जबकि पृष्ठभूमि सामान्य हो। http://jsfiddle.net/jononomo/7z8RZ/7/

निम्नलिखित कोड एक फीका मोडल बनाता है::

<div class="navbar navbar-fixed-top"> 
    <a href="#registration_modal" data-toggle="modal"> 
     Register 
    </a> 
    <div id="registration_modal" class="modal hide fade"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">×</button> 
       <h3 id="myModalLabel">Register An Account</h3> 
     </div> 

     <div class="modal-body"> 
      Registration form goes here. 
     </div> 

     <div class="modal-footer"> 
      <button class="btn btn-secondary" data-dismiss="modal">Cancel</button> 
      <button class="btn btn-primary">Register</button> 
     </div> 

    </div> 
</div> 

नोट:

मैं यहाँ मेरी समस्या प्रदर्शित करने के लिए एक JSFiddle बनाया अगर मैं बाहरी div निकालें, तब सब कुछ ठीक काम करता है। तो समस्या यह है कि मॉडल के लिए कोड निम्नलिखित लाइनों के भीतर है:

<div class="navbar navbar-fixed-top"> 
</div> 

बेशक

मैं है, कि div दूर करने के लिए नहीं करना चाहता क्योंकि मैं बटन लिंक है कि मॉडल में होने की शुरूआत चाहते हैं नेविबार जो स्क्रीन के शीर्ष पर तय किया गया है।

संपादित करें: मैंने इसे इस तथ्य से कम कर दिया है कि बाहरी div वर्ग navbar-fixed-top है। जब मैं उस टैग को हटा देता हूं, तो सबकुछ अपेक्षित काम करता है - आप इसे सही तरीके से यहां देख सकते हैं: http://jsfiddle.net/jononomo/7z8RZ/8/ बेशक, मैं नौसेना को शीर्ष पर तय करना चाहता हूं, इसलिए यह मेरी समस्या का समाधान नहीं करता है।

Answer 1

बूटस्ट्रैप गिट भंडार पर this issue देखें।

फिर से पहले this fiddle जैसे मोडल डालने का प्रयास करें।

<div id="registration_modal" class="modal hide fade"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
     <h3>Register An Account</h3> 
    </div> 

    <div class="modal-body"> 
     Registration form goes here. 
    </div> 

    <div class="modal-footer"> 
     <button class="btn btn-secondary" data-dismiss="modal">Cancel</button> 
     <button class="btn btn-primary">Register</button> 
    </div> 

</div> 
<div class="navbar navbar-fixed-top"> 
    <a href="#registration_modal" data-toggle="modal"> 
     Register 
    </a>  
</div> 

Answer 2

दुर्भाग्य से इस सवाल का जवाब यहाँ मेरी मदद नहीं था .. लेकिन सौभाग्य से इस चर्चा में एक ही मुद्दा है और वे एक उपयोगी जवाब यह है कि मेरे लिए काम किया है। मूल रूप से, आप सुनिश्चित करें कि मोडल माता पिता divs से किसी भी अजीब स्थिति तत्वों इनहेरिट नहीं है बनाने के लिए है:

Bootstrap modal appearing under background

Answer 3

तरह से है कि मैं हल यह एक <div class="modal-content"> टैग के अंदर मोडल के भीतर सब कुछ लपेटकर द्वारा किया गया। यह कुछ इस तरह देखा:

<div class="modal fade" id="TestModal"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      Modal header here 
     </div> 
     <div class="modal-body"> 
      <p>Modal content here</p> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
</div> 

modal-content div के बिना, मोडल बस के रूप में पृष्ठभूमि के रूप में ग्रे जा रहा समाप्त हो गया।