ट्विटर बूटस्ट्रैप मोडल - लोड "रिमोट" सामग्री

Question

मैं "रिमोट" सामग्री लोड करने की कोशिश कर रहा हूं, मूल रूप से जानकारी जो HTTP अनुरोध (उसी साइट पर) के माध्यम से भेजी जाती है। लौटे सामग्री ही इस तरह के रूप में जानकारी वापस फेंकता है:

<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times; </button> 
<h3>Change Your Password</h3> 
</div> 
<div class="modal-body"> 
<form> 
    <fieldset> 
     <label>Your current password</label> 
     <input type="password" placeholder="password"> 
     <label>Confirm current password</label> 
     <input type="text" placeholder="password"> 

     <button type="submit" class="btn">Submit</button> 
    </fieldset> 
</form> 
</div> 
<div class="modal-footer"> 
    <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a> 
</div> 

हालांकि, मोडल बॉक्स दूरस्थ सामग्री को दिखाने के लिए, मुझे विश्वास है कि मैं modal-body वर्ग पहले से ही दिखाया जाना चाहिये:

<div class="modal fade hide" id="ajax"> 
    <div class="modal-body"> 
     <p>body content to be replaced</p> 
    </div> 
</div> 

कैसे कर मैं इसके चारों ओर कदम रखता हूं, और पूर्ण मोडल div सामग्री प्रदान करता हूं और इसे ठीक से दिखाता हूं?

Answer 1

ऐसा लगता है कि आप एक वेबपृष्ठ के साथ मोडल बॉडी को पॉप्युलेट करना चाहते हैं। आप एक a टैग का उपयोग और डेटा का उपयोग कर लक्ष्य मोडल आह्वान सकता जिम्मेदार बताते हैं:

<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn">Modal 1</a>

Twitter documentation नोटों

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

एक उदाहरण के लिए http://jsfiddle.net/jhfrench/qv5u5/ देखें (और कैसे कई प्रेरक लिंक के बीच एक मोडल resuse करने पर जानकारी के लिए How can I reuse one Bootstrap modal div? देखें)।