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

요약: 프런트 엔드 프레임워크 부트스트랩의 모달 대화 상자의 경우 원격 옵션을 사용하여 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：

bootstrap 对话框

원천：php.cn

이전 기사：H5 에디터의 핵심 아이디어 예시 분석 다음 기사：H5 로컬 스토리지 인스턴스에 대한 자세한 설명

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• PHP 배열에 요소를 추가하는 방법
  2023-03-14 15:58:02
• 간단한 객관식 평가 시스템을 구현하는 JS를 보여주는 예
  1970-01-01 08:00:00
• 동일한 IP의 여러 제출을 제한하는 PHP 솔루션
  2023-03-15 07:38:01
• 정규식을 사용하여 HTML에서 양식 유효성 검사 구현
  1970-01-01 08:00:00
• JavaScript 엄격 모드의 포인팅 문제에 대한 자세한 설명
  1970-01-01 08:00:00
• Java로 트리 메뉴(다단계 메뉴 포함)를 작성하기 위한 예제 코드
  1970-01-01 08:00:00
• 마우스 오버 시 부드러운 전환을 구현하는 CSS3의 예에 대한 자세한 설명
  1970-01-01 08:00:00
• Swiper 캐러셀 이미지 소스코드 공유 분석
  1970-01-01 08:00:00
• VsCode 플러그인 요약 및 구성
  1970-01-01 08:00:00
• HttpUtils 요청 도구 클래스 코드
  1970-01-01 08:00:00

최신 이슈

페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...

에서 2024-04-06 21:58:04

0

1

800

CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...

에서 2024-04-06 20:22:15

0

1

454

CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...

에서 2024-04-06 12:53:11

0

1

376

웹 페이지 크기를 조정할 때 부트스트랩 스위치가 제대로 작동하지 않습니다. 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...

에서 2024-04-05 08:45:39

0

1

3443

Laravel의 Bootstrap 모드로 AWS PDF 파일 표시 https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf와 같...

에서 2024-04-04 22:16:18

0

1

1450

관련 주제

더>

• phpstudy 프로젝트를 실행하는 방법
• mysql 링크에서 10060이 보고되는 문제를 해결하는 방법
• 라라벨 미들웨어 소개
• TikTok에서 온라인으로 눈에 띄지 않는 방법
• 무선 네트워크 카드를 연결할 수 없습니다
• setrequestproperty를 사용하는 방법
• 가상 화폐 거래 플랫폼
• 컴퓨터 응용 분야