2012-12-05 3 views
13

Я использую модные окна 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> 

в Linked загрузки страницы в Модальное окно!

enter image description here

ответ

27

Глядя на линии 223 в бутстраповских-modal.js показал, что происходит:

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

При использовании данных API модальные проверяет, является ли атрибут href не является идентификатор и устанавливает, что в качестве значения для опции remote. Это заставляет страницу загружать контент data-target, а затем загружать содержимое href после содержимого remote.

Таким образом, чтобы избежать HREF контента получать загружены в модальных вам нужно указать data-remote="false" на ссылку:

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

Большое спасибо Джошу. спасибо полностью, я не должен был написать return false вручную: P –

0

модальный плагин дает преимущество для атрибута 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> 
+0

я пробовал .. но его загрузка страницы. –

+0

Я вижу ту же проблему. Кажется, это работает не так, как ожидалось. –

+1

@JoshFarneman @ Харша Упс ... извините за это! Забыл, что удаленная загрузка начнет с этого. Я обновил свой ответ. Просто добавьте '#' в 'href'. – merv

Смежные вопросы