이 레슨에서는 주로 대화식 웹 사이트를위한 매우 일반적인 팝업 기능 플러그인 인 Bootstrap의 Modal Box 플러그인에 대해 배우게됩니다.
Bootstrap Modal Box 플러그인에 대한 자세한 내용은 특별 주제 "Bootstrap Modal 사용 자습서"를 클릭하여 배우십시오. 나는 당신이 그것을 좋아하기를 바랍니다. 그래서 아래에서 계속하십시오
하나. 기본 사용
모달 박스를 사용하는 팝업 구성 요소에는 3 개의 DIV 컨테이너 요소, 즉 모달 (모달 선언 레이어)이 필요합니다.
대화 상자 (창 선언 계층), 내용 (컨텐츠 계층). 내용 레이어에는 헤더, 본문 및 바닥 글과 같은 세 개의 레이어가 있습니다.
// 기본 예
<!-모달 선언, 쇼-> <div tabindex = "-1"> <!-창문 선언-> <div> <!-컨텐츠 선언-> <div> <!-헤더-> <div> <버튼 "버튼"data-dismiss = "modal"> <pan> </span> button> <h4> </h4> </h4>> </h4>> </h4> </h4> 멤버는 일시적으로 멤버에게 로그인 할 수 없습니다 </p> </div> <!-각주-> <div> <버튼 유형 = "button"> register </button> <버튼 유형 = "button"> 로그인 </div> </div> </div> </div> </div> </div </div
모달 상자를 자동으로 숨기고 버튼을 클릭하여 팝업하려면 다음 작업을 수행해야합니다.
// 모달 상자에서 쇼를 제거하고 ID <div id = "myModal"> // 모달 상자를 클릭하여 클릭하여 <버튼 데이터-토글 = "modal"data-target = "#myModal"> 팝업 창을 클릭하십시오 </button> // 3 가지 크기의 팝업 창이 있습니다. <div id = "mymodal"> // 본체 부품의 그리드 시스템에서 유체를 사용하여 <!-본체-> <div> <div> <div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> </div> </div> </div> </div> </div> </div> </div>>
둘. 사용 지침
기본 사용법을 도입 한 후 플러그인의 다양한 중요한 사용을 살펴 보겠습니다. 모든 플러그인은 JavaScript/JQuery를 기반으로합니다. 그런 다음 사용법, 매개 변수, 메소드 및 이벤트의 네 가지 요소가 있습니다.
1. 사용법
첫 번째 유형 : 데이터 속성을 통해 전달할 수 있습니다.
// data-toggledata-toggle = "modal"data-target = "#myModal"
Data-Toggle은 트리거 유형을 나타냅니다
데이터 표적은 트리거 된 노드를 나타냅니다
<button>을 사용하지 않지만 <a>, 데이터-표적도 href = "#myModal"을 사용할 수 있습니다.
바꾸다. 물론 데이터 타겟을 사용하는 것이 좋습니다. Data-Toggle 및 Data-Target의 두 가지 선언 된 속성 외에도 몇 가지 옵션이 있습니다.
2. 매개 변수
HTML 요소에서 데이터-* 속성 선언을 설정하여 효과를 제어 할 수 있습니다.
// 흰색 배경을 클릭하고 클릭하지 않으려면 클릭하지 않으려면 Data-BackDrop = "False"를 닫지 않으려면 ESC를 눌러 데이터를 닫지 않으려면 "false"// HIDDEN을 초기화합니다. 버튼 클릭이 트리거되면 첫 번째 클릭이 표시되지 않으며 두 번째로 표시됩니다. data-show = "false"// index.html 컨테이너 href = "index.html"에 한 번
물론 JavaScript로 직접 설정할 수도 있습니다.
// jQuery.Modal을 통해 $ ( '#myModal')를 선언합니다 ({show : true, 배경 : False, Keyboard : False : 'index.html',});3. 방법
기본적으로 팝업 창이 표시되지 않으면 어떻게 전후에 팝업 창을 클릭 할 수 있습니까?
// 팝업 창을 표시하려면 클릭하십시오.
4. 이벤트
모달 박스는 팝업 전, 팝업 후, 닫기 전 및 닫는 후 4 가지 유형의 시간을 지원합니다.
$ ( '#myModal'). on ( 'show.bs.modal', function () {alert ( '쇼 메소드가 호출 될 때 즉시 무료 무료!');}); $ ( '#myModal'). on ( 'shows.bs.modal', function () {alert ( 'modal box가 즉시 무료 표시! ');}); $ ('#myModal '). on ('hide.bs.modal ', function () {'alert ( 'hide 메소드가 호출 될 때 즉시 무료입니다!');}); $ ( '#myModal'). on ( 'hiden.bs.modal', function () {modal box is at the modal box. 표시! ');}); $ ('#myModal '). on ('loaded.bs.modal ', function () {alert ('원격 데이터가로드 된 후 무료! ');});이 일련의 튜토리얼은 다음과 같이 컴파일되었습니다. Bootstrap Basic Tutorials 특별 주제, Click to Learn에 오신 것을 환영합니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.