Bootstrap 4 Modal에서 원격 콘텐츠를 어떻게 로드할 수 있습니까?

Bootstrap 4 Modal에서 원격 콘텐츠 로드

Bootstrap 4의 출현으로 Modal의 원격 데이터 로드 기능이 크게 변경되었습니다. Bootstrap 3과 대조적으로 Bootstrap 4는 클라이언트 측 템플릿 또는 데이터 바인딩 프레임워크 사용에 대한 권장 사항을 인용하여 원격 옵션을 더 이상 사용하지 않습니다.

Bootstrap 4 Modal에서 감지된 문제:

사용자들은 새로운 Bootstrap 4 알파 릴리스를 사용하여 Modal에서 원격 콘텐츠를 로드하는 데 문제가 발생한다고 보고했습니다. 팝업 창이 나타나는 동안 모델 본문은 비어 있습니다. 이는 제공된 URL에서 콘텐츠 로드 요청이 이루어지지 않았음을 나타냅니다.

jQuery를 사용한 솔루션:

원격 로딩 기능을 복원하려면 jQuery를 사용하여 수동으로 구현할 수 있습니다.

$('body').on('click', '[data-toggle="modal"]', function(){
        $($(this).data("target")+' .modal-body').load($(this).data("remote"));
    });  

설명

이 솔루션은 jQuery의 load() 메서드를 사용하여 콘텐츠를 동적으로 로드합니다. 지정된 원격 URL에서 대상 모달의 .modal-body 요소로 이동합니다. 클릭 이벤트 리스너는 data-toggle="modal" 속성이 있는 모든 요소에 바인딩되어 해당 기능이 애플리케이션의 모든 모달에 적용되도록 합니다.

위 내용은 Bootstrap 4 Modal에서 원격 콘텐츠를 어떻게 로드할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!