बूटस्ट्रैप का रिमोट मॉडल डायलॉग काम नहीं कर रहा है

मुझे ट्विटर बूटस्ट्रैप एपीआई से रिमोट मोडल डायलॉग का उपयोग करने में समस्याएं आ रही हैं।बूटस्ट्रैप का रिमोट मॉडल डायलॉग काम नहीं कर रहा है

मैं रिमोट एचटीएमएल पेज से सामग्री के साथ एक मोडल संवाद लोड करने की कोशिश कर रहा हूं। मेरे पास दो पृष्ठ हैं, जिनमें बटन (मोडल-रिमोट.html) है और जिसमें एक सामग्री है जिसे मैं प्रदर्शित करना चाहता हूं जब बटन क्लिक किया जाता है (मोडल-target.html)।

मोडल-remote.html:

<html> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 
    <script src="bootstrap/js/jquery.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 

    <div class="modal" 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>The quick brown fox jumps over the lazy dog. </p> 
     </div> 
     <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary" id="save_btn">Save changes</button> 
     </div> 
    </div> 
</html>

<!DOCTYPE html> 
<html lang="en"> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 
    <script src="bootstrap/js/jquery.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 

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

</html>

यहाँ लक्ष्य (या दूरस्थ) पेज

मोडल-target.html के लिए मेरे कोड है वे एक ही निर्देशिका में हैं। जब मैं बटन पर क्लिक करता हूं, कुछ भी नहीं होता है। किसी को पता है कि मैं क्या गलत कर रहा हूँ? गैर-रिमोट मोडल डायलॉग ठीक काम करते हैं, मैं सिर्फ यह नहीं समझ सकता कि रिमोट फीचर का उपयोग कैसे किया जाए।

स्रोत

2012-10-19 Blake

आपको ध्यान से modal documentation पढ़ना चाहिए।

एक दूरस्थ यूआरएल प्रदान की जाती है, तो सामग्री jQuery के लोड विधि के माध्यम से भरी हुई हो जाएगा और .modal शरीर में इंजेक्ट किया

आपकी फ़ाइलों अधिक इस तरह होना चाहिए:

मोडल-रिमोट.html:

<!DOCTYPE html> 
<html lang="en"> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 
    <script src="bootstrap/js/jquery.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 

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

<div class="modal hide" 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"> 
     <!-- content will be loaded here --> 
     </div> 
     <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary" id="save_btn">Save changes</button> 
     </div> 
    </div> 
</html>

मोडल-target.htm एल:

<p>The quick brown fox jumps over the lazy dog. </p>

स्रोत

2012-10-20 09:17:24 Sherbrow

कि काम करता है। धन्यवाद! – Blake

अब बूटस्ट्रैप 3 के साथ नोट करें, सामग्री को मॉडल तत्व ** की रूट ** में इंजेक्शन दिया जाएगा। Http://stackoverflow.com/a/18387625/553073 और [दस्तावेज़] देखें (http://getbootstrap.com/javascript/#modals) – lastr2d2

, बूटस्ट्रैप v3.30 से शुरू दूरस्थ विकल्प अस्वीकार्य है। Here देखें।

तो दूरस्थ सामग्री का उपयोग करने का अनुशंसित तरीका jquery.load() विधि का उपयोग करना है।

उदाहरण:

$("modal").load("remote_content.html");

स्रोत

2015-01-06 07:41:59 Chvoirre00

बूटस्ट्रैप का रिमोट मॉडल डायलॉग काम नहीं कर रहा है

उत्तर

संबंधित मुद्दे