Twitter BootStrap模式窗口後備鏈接

我正在使用Twitter Bootstrap模式窗口。只是因爲js錯誤使模式窗口不工作 - 有一個回退頁面。我怎樣才能確保頁面加載，如果模式窗口不加載？Twitter BootStrap模式窗口後備鏈接

鏈接，打開模態窗口

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

當我試圖將鏈接添加到HREF如下

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

在鏈接頁面加載莫代爾窗口！

enter image description here

來源

2012-12-05 Harsha M V

綜觀自舉modal.js線223揭示了發生的事情：

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

當使用數據API的模式將檢查href屬性不是一個ID，並設置爲價值爲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>

來源

2012-12-05 17:35:25

非常感謝喬希。非常感謝我沒有必要手動寫回一個false：P –

模態插件會優先於data-target屬性。然後，您可以使用href指向所需的回退鏈接。由於Modal插件在上調用preventDefault單擊匹配選擇器[data-toggle="modal"]的事件，鏈接將僅在禁用JavaScript（或Modal插件未加載時）後纔會執行。

然而，有一點需要記住，Modal插件確實使用href屬性來加載遠程內容。要繞過該功能被激活，只需在href值的末尾加上'＃'即可。

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

來源

2012-12-05 13:07:44 merv

我試過..但它的加載頁面。 –

我看到同樣的問題。這似乎沒有按預期工作。 –

@JoshFarneman @Harsha哎呀...對不起！忘記了遠程加載將與此相沖突。我更新了我的答案。只需在'href'中添加'＃'即可。 – merv

Twitter BootStrap模式窗口後備鏈接

回答

相關問題