2012-12-05 27 views
13

मैं ट्विटर बूटस्ट्रैप मोडल विंडो का उपयोग कर रहा हूं। बस जेएस त्रुटि के कारण मोडल विंडोज़ काम नहीं करते हैं - एक पतन पृष्ठ हैं। मोडल विंडो लोड नहीं होने पर मैं कैसे सुनिश्चित कर सकता हूं कि पेज लोड हो गया है? मोडल विंडोट्विटर बूटस्ट्रैप मॉडल विंडो फ़ॉलबैक लिंक

<a href="#login-modal" data-toggle="modal" data-target="#login-modal">Login</a> 

मोडल विंडो

<!-- Login Modal --> 
     <div id="login-modal" class="modal hide fade landing-modal" tabindex="-2" 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>Login</h3> 
      </div> 
      <div class="modal-body"> 
       <form> 
        <div class="control-group"> 
         <label for="email">Email Address</label> 
         <div class="controls"> 
          <input class="input-medium" name="email" type="text" /> 
         </div> 
        </div> 
        <div class="control-group"> 
         <label for="password">Password</label> 
         <div class="controls"> 
          <input class="input-medium" name="password" type="password" /> 
         </div> 
        </div> 
        <div class="control-group"> 
         <label class="checkbox"> 
          <input type="checkbox" value=""> 
          Remember me</label> 
        </div> 
        <div class="control-group"> 
         <div class="controls"> 
          <button type="submit" class="button"> 
           Login 
          </button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 

को खोलने के लिए के रूप में

<a href="login.html" data-toggle="modal" data-target="#login-modal">Login</a> 

में लिंक्ड पृष्ठ भार इस प्रकार जब मैं href के लिए लिंक जोड़ने का प्रयास

लिंक मॉडल विंडो !!

enter image description here

उत्तर

27

बूटस्ट्रैप-modal.js में लाइन 223 को देखते हुए पता चला क्या हो रहा है:

, option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data()) 

डेटा API के उपयोग मोडल चेकों जब अगर href विशेषता एक आईडी नहीं है और सेट है कि मूल्य के रूप में remote विकल्प के लिए। इससे पेज data-target सामग्री को प्रारंभ में लोड करने का कारण बनता है और फिर remote सामग्री के बाद href सामग्री में लोड होता है।

तो बचने के लिए href सामग्री मोडल आप अपने लिंक पर data-remote="false" निर्दिष्ट करने की आवश्यकता में लोड हो रही:

<a href="/some-login-page.html" data-toggle="modal" data-target="#login-modal" data-remote="false">Login</a> 
+0

बहुत बहुत धन्यवाद जोश। पूरी तरह से धन्यवाद मुझे मैन्युअल रूप से वापसी झूठ लिखना नहीं था: पी –

0

मोडल प्लगइन data-target विशेषता को महत्व देता है। आप उस फॉलबैक लिंक को इंगित करने के लिए href का उपयोग कर सकते हैं। चूंकि मॉडल प्लगइन preventDefaultपर चयनकर्ता [data-toggle="modal"] से मेल खाने वाली घटनाओं पर क्लिक करता है, तो लिंक केवल तभी किया जाएगा जब जावास्क्रिप्ट अक्षम हो (या मॉडल प्लगइन लोड नहीं होता है)।

ध्यान में रखना एक बात यह है कि मॉडल प्लगइन दूरस्थ सामग्री लोड करने के लिए href विशेषता का उपयोग करता है। उस सुविधा को सक्रिय होने से बाईपास करने के लिए, href मान के अंत में बस '#' शामिल करें।

<a href="/some-login-page.html#" data-toggle="modal" data-target="#login-modal">Login</a> 
+0

मैं करने की कोशिश की है कि .. लेकिन इसकी लोडिंग पेज। –

+0

मुझे एक ही समस्या दिखाई दे रही है। यह उम्मीद के रूप में काम नहीं लग रहा है। –

+1

@ जोशफर्नमैन @ हर्ष ओप्स ... इसके बारे में खेद है! भूल गए कि रिमोट लोडिंग उस के साथ लात मार जाएगा। मैंने अपना जवाब अपडेट किया। बस 'href' में '#' जोड़ें। – merv