모달 박스 (모달) 는 부모 형태에 겹쳐진 어린이 형태입니다. 일반적으로 목적은 별도의 소스에서 컨텐츠를 표시하는 것이며, 이는 부모 양식을 남기지 않고 약간의 상호 작용을 가질 수 있습니다. 하위 형태는 정보, 상호 작용 등을 제공 할 수 있습니다.
플러그인의 기능을 별도로 참조하려면 modal.js를 참조해야합니다. 또는 Bootstrap 플러그인 개요 장에서 언급했듯이 bootstrap.js 또는 compressed 버전의 bootstrap.min.js를 참조하십시오.
1. 사용법
모달 박스 (모달) 플러그인의 숨겨진 내용을 전환 할 수 있습니다.
데이터 속성을 통해 : 컨트롤러 요소 (예 : 버튼 또는 링크)에서 속성 Data-Toggle = "modal"을 설정하고 데이터-타겟 = "#식별자"또는 href = "#식별자"를 설정하여 특정 모달 상자를 스위치로 지정합니다 (id = "identifier").
JavaScript :이 기술을 사용하면 간단한 JavaScript 라인을 통해 ID = "식별자"가있는 모달 상자를 호출 할 수 있습니다.
$ ( '#식별자'). Modal (옵션)
2. 간단한 예
div id = "myModal"> <div> <버튼 유형 = "버튼"Data-dismiss = "modal"> x </button> <h3> 다이얼 박스 제목 </h3> </div> <div> <p> 다이얼 박스 바디 </p> </div> <div> <a href = "#"data-dismiss = "modal"> href = "a href ="#" data-dismiss = "modal"> 확인 </a> </div> </div>
모달 대화 상자는 버튼이나 링크를 사용하여 직접 호출 할 수 있으며 간단한 사용법입니다.
다음과 같이 코드를 복사하십시오.
또한 대화 상자를 열 때마다 양식 데이터를 지우도록해야 할 때 다음과 같이.
코드 사본은 다음과 같습니다. $ ( '#modal1'). modal ( 'hide');
$ ( "#modal1"). on ( "hidden", function () {$ ( '#form1') [0] .reset ();}); // 계약을 추가 한 후 양식 작동을 지우십시오
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.