Bootstrap이 원격 데이터를 한 번만 로드하는 문제 해결-H5 튜토리얼-php.cn

Bootstrap이 원격 데이터를 한 번만 로드하는 문제 해결

巴扎黑

풀어 주다： 2017-07-24 11:06:37

원래의

1694명이 탐색했습니다.

요약: 프런트 엔드 프레임워크 부트스트랩의 모달 대화 상자의 경우 원격 옵션을 사용하여 URL을 지정할 수 있습니다. 그러면 대화 상자가 팝업될 때 이 주소의 데이터를 .modal-body로 자동으로 로드합니다. 처음에는 한 번만 로드되지만 이벤트에서 RemoveData() 메서드를 호출하면 이 문제를 해결할 수 있습니다.

1. 부트스트랩 모달 대화 상자 및 간단한 사용

 1 <div id="myModal" class="modal hide fade"> 2     <div class="modal-header"> 3         <button type="button" class="close" data-dismiss="modal">x</button> 4         <h3>对话框标题</h3> 5     </div> 6     <div class="modal-body"> 7         <p>对话框主体</p> 8     </div> 9     <div class="modal-footer">10         <a href="#" class="btn" data-dismiss="modal">取消</a>11         <a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>12     </div>13 </div>

로그인 후 복사

표시 효과는 아래 그림과 유사합니다.

버튼이나 링크를 사용하여 모달 대화 상자를 직접 호출할 수 있습니다. 사용법:

<button type="button" data-toggle="modal" data-target="#myModal">打开对话框</button><a href="#myModal" role="button" class="btn" data-toggle="modal">打开对话框</button>

로그인 후 복사

 <br/>

로그인 후 복사

대화 상자에 정적 콘텐츠만 표시할 수 있으며 대화 상자의 원격 옵션을 사용하면 더욱 강력한 효과를 얻을 수 있습니다.

2. 모달 대화 상자가 페이지를 .modal-body에 로드하도록 하려면 원격 옵션을 사용하세요.

두 가지 방법이 있습니다. 하나는 링크를 사용하는 것이고, 다른 하나는 스크립트를 사용하는 것입니다.

2.1 링크 사용

<a href="page.jsp" data-toggle="modal" data-target="#myModal">打开对话框</a>

로그인 후 복사

이 링크를 클릭하면 page.jsp의 내용이 대화 상자의 .modal-body에 로드되어 대화 상자가 표시됩니다.

2.2 스크립트 사용

$("#myModal").modal({
    remote: "page.jsp"
});

로그인 후 복사

이 스크립트의 효과는 링크를 사용하는 것과 같습니다. 이 스크립트가 실행되면 page.jsp의 내용이 대화 상자의 .modal-body에 로드됩니다. , 대화 상자 표시를 차례로 클릭합니다.

이 두 가지 방법 뒤에 Bootstrap은 jQuery의 load() 메서드를 호출하여 서버에서 page.jsp 페이지를 로드합니다. 하지만 이 로딩은 한 번만 발생합니다. 링크를 몇 번 클릭하든, 스크립트를 여러 번 실행하든, 원격 옵션에 전달된 값을 변경하든, 대화 상자는 페이지를 다시 로드하지 않습니다. 이는 정말 골치 아픈 일입니다. . 그러나 문제는 여전히 해결될 수 있습니다.

3. 대화 상자를 열 때마다 페이지를 다시 로드할 수 있도록 데이터를 제거합니다.

관련 문서를 검색하고 참조한 결과 대화 상자의 숨겨진 이벤트에 다음과 같은 설명을 작성하는 것으로 충분하다는 것을 알았습니다.

$("#myModal").on("hidden", function() {
    $(this).removeData("modal");
});

로그인 후 복사

대화 상자를 열기 전에 매번 데이터를 제거할 수도 있지만 효과는 동일합니다.

참고: 위 코드는 Bootstrap v2를 기반으로 합니다. Bootstrap v3을 사용하는 경우 모달 대화 상자의 HTML과 이벤트 작성 방법이 다소 다릅니다. 예를 들어 위의 숨겨진 이벤트의 경우 작성:

$("#myModal").on("hidden.bs.modal", function() {
    $(this).removeData("bs.modal");
});

로그인 후 복사

위 내용은 Bootstrap이 원격 데이터를 한 번만 로드하는 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!