작동 모달 단일 부하 데이터

이번에는 모달을 한 번에 로드할 때 주의 사항을 알려드리겠습니다. 다음은 실제 사례입니다.

1. Bootstrap 모달 대화 상자 및 간단한 사용

 <p id="myModal" class="modal hide fade">
 <p class="modal-header">
 <button type="button" class="close" data-dismiss="modal">x</button>
 <h3>对话框标题</h3>
 </p>
 <p class="modal-body">
 <p>对话框主体</p>
 </p>
 <p class="modal-footer">
 <a href="#" rel="external nofollow" rel="external nofollow" class="btn" data-dismiss="modal">取消</a>
 <a href="#" rel="external nofollow" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">确定</a>
 </p>
</p>

모달 대화 상자는 버튼 또는 링크를 사용하여 직접 호출할 수 있습니다. 간단한 사용법은 다음과 같습니다:

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

2. 원격 옵션을 사용하여 모달 대화 상자가 페이지를 .modal-body

에 로드하도록 합니다. 두 가지 방법이 있는데, 하나는 링크를 사용하는 것이고, 다른 하나는 스크립트를 사용하는 것입니다.

2.1 링크 이용하기

<a href="page.jsp" rel="external nofollow" 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. 대화 상자가 열릴 때마다 페이지를 다시 로드할 수 있도록 데이터를 제거하세요.

검색하고 관련 문서를 참조한 결과, 대화 상자의 숨겨진 event에

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

라는 문구를 작성하고 있는 것을 발견했습니다. 매번 대화 상자를 열기 전에 데이터를 제거할 수도 있으며 효과는 동일합니다.

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

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

이 기사의 사례를 읽으신 후 마스터하셨다고 생각합니다. 방법, 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 작동 모달 단일 부하 데이터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!