2012-12-05 4 views
13

트위터 부트 스트랩 모달 윈도우를 사용하고 있습니다. js 오류로 인해 모달 창을 작동시키지 마십시오. 폴백 페이지가 있습니다. 모달 윈도우가로드되지 않으면 페이지가로드되는지 어떻게 확인할 수 있습니까? 에서Twitter BootStrap 모달 윈도우 폴백 링크

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

링크 된 페이지가로드를 다음과 같이 내가 HREF에 대한 링크를 추가 할 때 모달 창

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

를 엽니 다

링크 모달 창 !!

enter image description here

답변

27

무슨 일 공개 :

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

데이터 API를 사용 모달 확인할 때 href 속성 ID를하지 않고 설정하는 경우 그 값과 remote 옵션의 경우 이로 인해 페이지에 처음에 data-target 콘텐츠가로드되고 remote 콘텐츠 뒤에 href 콘텐츠가로드됩니다. ..

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

고마워요 조쉬. 완전히 감사 나는 수동으로 반환 false를 써야만했습니다 : P는 –

0

모달 플러그인은 data-target 속성에 우선 순위를 제공합니다. 그런 다음 href을 사용하여 원하는 대체 링크를 가리킬 수 있습니다. Modal 플러그인은 preventDefault을 호출하기 때문에 이벤트는 선택기 [data-toggle="modal"]과 일치합니다. JavaScript가 비활성화되어 있거나 Modal 플러그인이로드되지 않은 경우에만 링크가 이어집니다.

그러나 Modal 플러그인은 원격 콘텐츠를로드하기 위해 href 속성을 사용한다는 점을 명심해야합니다. 해당 기능을 활성화하지 않으려면 href 값의 끝에 '#'을 포함하십시오. 부트 스트랩-modal.js 라인 (223)을 보면

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

는 그 시도하지만 로딩 페이지 :

는 그래서 HREF 내용은 당신이 당신의 링크를 data-remote="false"를 지정해야합니다 모달로로드하기 방지 할 수 있습니다. –

+0

동일한 문제가 발생합니다. 예상대로 작동하지 않는 것 같습니다. –

+1

@JoshFarneman @Harsha 죄송합니다. 원격로드가 그걸로 걷어 버리는 것을 잊어 버렸습니다. 나는 나의 대답을 업데이트했다. 그냥 'href'에 '#'을 추가하십시오. – merv