बूटस्ट्रैप 3 मोडल पृष्ठभूमि गुम है

Question

बूटस्ट्रैप 3 मोडल सामान्य रूप से मोडल को हाइलाइट करने के लिए पृष्ठ को गहरा बनाता है, और यह इंगित करने के लिए कि पृष्ठ यूआई निष्क्रिय होने पर पृष्ठ UI अक्षम है।

मेरे कोडिंग (कुछ हफ्ते पहले) के दौरान किसी बिंदु पर, पृष्ठभूमि दिखाई दे रही थी। बाकी सब कुछ ठीक काम करता है, जिसमें इसे क्लिक करके मोडल बंद करना या शीर्ष दाएं कोने में एक्स पर क्लिक करना शामिल है। पेज यूआई भी निष्क्रिय होने तक अक्षम है, जो ठीक है। चूंकि यह कोड की हजारों लाइनें हैं, इसलिए मैं उन्हें यहां पेस्ट नहीं करूंगा।

मुझे पता नहीं लगा कि मेरी मोडल पृष्ठभूमि क्यों गुम है। मैंने यह सुनिश्चित करने के लिए अपने एचटीएमएल को प्रमाणित किया है कि कोई अनुपलब्ध टैग नहीं है। मैं अपने पृष्ठ पर डेटाटेबल्स, टैबड्रॉप और डी 3 का भी उपयोग कर रहा हूं लेकिन इस मुद्दे को हल करने के लिए इन्हें (जेएस और सीएसएस) को एक-एक करके हटाने का प्रयास किया है। मुझे और क्या देखना चाहिए? क्रियार्थ द्योतक में से एक को देखने के लिए http://suite.swiftdigital.com.au/scripts/marcus/modal/event.htm

हरी "नए प्रतिभागी" बटन पर क्लिक:

यहाँ पेज है। एक और स्क्रीन के बीच में संपादन दृश्य बटन है।

Answer 1

नीचे यह जोड़ने का प्रयास करें यह एक सीएसएस या HTML मुद्दा सभी के बाद नहीं था। नवीनतम बूटस्ट्रैप जेएस फ़ाइल प्राप्त करने से इसे ठीक किया गया है। मैं 3.2.0 पर था और 3.3.1 तक अपग्रेड किया गया था। हुह। (आपको बूटस्ट्रैप जेएस और सीएसएस मैच के संस्करणों को सुनिश्चित करने की आवश्यकता है।)

Answer 2

अपने सीएसएस करने के लिए इस जोड़ें:

.modal-backdrop, .modal-backdrop.fade.in { 
opacity: 0.7; 
filter: alpha(opacity=70); 
background: #fff; 
} 

अगर आप सिर्फ शेयर बूटस्ट्रैप सीएसएस का उपयोग कर रहे हैं। यह 70% की अस्पष्टता के साथ बैकग्राउन सफेद बना देगा।

या

अपने सीएसएस करने के लिए इस जोड़ें:

.fade.in { 
opacity: .75; 
background-color: #000; 
} 

इसका कारण यह है अभी, अपने .fade.in वर्ग है कोई पृष्ठभूमि संलग्न रंग है।

Answer 3

OOTB बूटस्ट्रैप वेबसाइट अपने कोड इस तरह दिखता है करने के लिए अपने कोड तुलना:

<div class="modal-dialog" style="width: 600px"> 
     <div class="modal-content"> 
      <div class="modal-header">... 
       rest of the module 

बूटस्ट्रैप इस तरह कोड है:

<div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block; padding-right: 17px;"> 
    <div class="modal-backdrop fade in" style="height: 995px;"></div> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 

ऐसा लगता है कि आप इस रेखा से नीचे लापता हैं। अपने modal-dialog DIV

<div class="modal-backdrop fade in" style="height: 995px;"></div>