बूटस्ट्रैप से दिखाई नहीं दे

Question

मैं नकल की और मेरी रेल 3.2 अनुप्रयोग में एक बुनियादी मोडल विंडो बनाने के लिए चहचहाना बूटस्ट्रैप से उदाहरण कोड पेस्ट किया है मोडल:

<!-- Modal --> 
<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> 

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

यह काम नहीं कर रहा। यह jQuery या स्क्रिप्ट लोड नहीं होने के कारण नहीं है क्योंकि ए) इसे किसी भी जेएस को लोड करने की आवश्यकता नहीं है क्योंकि यह डेटा लक्ष्यीकरण का उपयोग कर रहा है और बी) मैंने कंसोल की जांच की है और सबकुछ पूरी तरह फायरिंग कर रहा है।

यह भी है क्योंकि मैं दोनों boostrap.js और बूटस्ट्रैप-modal.js शामिल कर रहा हूँ नहीं है ... मैं जाँच की है और मैं नहीं कर रहा हूँ।

मुझे नुकसान हुआ है। यह सिर्फ काम करना चाहिए। अन्य बूटस्ट्रैप जेएस साइट पर ठीक काम कर रहा है।

केवल एक चीज मैं के बारे में सोच सकते हैं कि यह वर्गों की परिभाषा के साथ क्या करना है और कुछ .hide .fade है - जब मैं उन्हें बाहर ले जाना, मोडल ठीक दिखाई देता है। जब मैं उन्हें शामिल करता हूं, तो यह बिल्कुल दिखाई नहीं देगा।

jQuery यूआई यह में हस्तक्षेप कर सकते हैं?

मुझे किसी भी आगे की जानकारी आप मेरी मदद की जरूरत हो सकती लिए पूछें ...

अद्यतन:

तो मुझे लगता है मैं इस समस्या देखते हैं, लेकिन मैं इसे कैसे ठीक करने के लिए पता नहीं है। जब मैं कंसोल की जाँच करें, सही शीर्ष पर मुझे लगता है कि

element.style { 
display: none; 
} 

, div का हिस्सा अब किसी भी तरह है, तो कंसोल में यह इस तरह दिखता है:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" > 

लेकिन मैं नहीं जानता कि यह इसे क्यों जोड़ रहा है, या कहां से। मैं इसे कैसे ट्रैक कर सकता हूं?

धन्यवाद

Answer 1

मैंने कारण को ट्रैक किया।

बस इस प्रश्न पर आने वाले किसी को भी कुछ सामान्य उपयोगिता देने के लिए। यदि आप यह नहीं समझ पा रहे हैं कि क्या गलत है, तो अपने आवेदन में किसी भी स्टाइल शीट में 'मोडल' 'फीड' 'फीड इन' और 'छुपाएं' के किसी भी वर्ग के लिए 'सभी खोजें' करने का प्रयास करें।

मैं 'फीका' का एक उदाहरण एक यादृच्छिक सीएसएस फ़ाइल में परिभाषित किया जा रहा था, और कि क्या यह के रूप में यह बूटस्ट्रैप अधिभावी था प्रदर्शित रोक रहा था। एक बार जब मैंने संदर्भ हटा दिया, तो सबकुछ ठीक था।

Answer 2

आप 3 बूटस्ट्रैप के लिए बूटस्ट्रैप 2.3.2 से अपग्रेड कर लिया है तो आप अपने मॉडल divs में से किसी से 'छिपाएं' वर्ग निकालना होगा .;

Answer 3

मैं अपने < ली अंदर मेरे मोडल < div> था> .... अच्छा नहीं।

बाहर काम करता है ठीक :-)

<div class="modal fade" id="confirm-logout" tabindex="-1" role="dialog" aria-labelledby="logoutLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">....</h4> 
      </div> 

      <div class="modal-body"> 
       <p>....</p> 
      </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <a class="btn btn-danger btn-ok">OK</a> 
      </div> 
     </div> 
    </div> 
</div> 
<li> 
    ..... 
</li> 

Answer 4

आप कोणीय का उपयोग कर और एक निर्देश में यह एक कस्टम मॉडल है कि बनाने का प्रयास कर रहे हैं, तो मोडल पृष्ठभूमि दिखाई देगा लेकिन मोडल ही जब तक आप सेट नहीं करेगा प्रतिस्थापित करें: आपके निर्देश पर सच है।

टाइपप्रति निर्देशक:

export class myModalDirective implements ng.IDirective { 
    static Register =() => { 
     angular.module('app').directive('myModal',() => { return new myModalDirective() }); 
    } 
    templateUrl = 'mymodal.html'  
restrict = 'E'; 
    replace = true; 
    scope = { 
     show: '=' 
    } 
    link = (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => { 
     var vm = this; 
     scope.$watch(function() { return scope.show; }, function (vis) { 
      if (vis) { 
       $(element).modal('show'); 
      } else { 
       $(element).modal('hide'); 
      } 
     }); 

    } 
    constructor() { 
    } 
} 

मोडल एचटीएमएल

<div class="modal fade" data-keyboard="false" data-backdrop="static"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
       <div class="modal-header"> 
        <h4 class="modal-title">Modal Title</h4> 
       </div> 
       <div class="modal-body"> 
       </div> 
     </div> 
    </div> 
</div> 

Answer 5

मैं सिर्फ इस मुद्दे भर में आया था, और कस्टम सीएसएस शैली पत्रक पाठ का रंग पाया: #ffffff पाठ सामग्री जलमग्न हो जाता है, क्योंकि मॉडल पृष्ठभूमि रंग एक जैसा है! i.e.model-content {background-color: #ffffff;} निम्नलिखित जोड़कर इसे अपनी कस्टम स्टाइल शीट में ओवरराइड करना सुनिश्चित करें। मॉडल-सामग्री {रंग: # 646464! महत्वपूर्ण;}
इससे मदद मिल सकती है।

Answer 6

आपको jquery और bootstrap.min.js आयात करना होगा।

कोणीय CLI को यह करें:

"scripts": ["../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/bootstrap/dist/js/bootstrap.min.js"] 

सुनिश्चित करें कि आप अपने फ़ोल्डर्स किया हुआ है।