이 기사는 주로 JavaScript 플러그인 팝업 상자를 배웁니다.
사례
iPad의 영향과 마찬가지로 페이지 컨텐츠에 작은 오버레이를 추가하여 페이지 요소에 추가 정보를 추가하십시오.
몇 가지 간단한 정적 케이스 렌더링을 살펴 보겠습니다.
이 효과는 비교적 간단하며, 주로 정적으로 나타나는 작은 형태이며 형태 제목 및 양식 내용으로 나뉩니다.
<div> <div> <div> </div> <h3> Popover Top </h3> <div> <p> sed posuere consectetur est에서. Aenean EU Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis Vesibulum. Aenean EU Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis. Aenean EU Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis Vesibulum. Aenean EU Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis Vesibulum. Aenean EU Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis. Aenean EU Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis Vestibulum. </p> </div> </div> <div> </div>
그러나 우리는 여전히 요소에 대한 간단한 기본 레이아웃을 설정해야합니다.
<스타일 유형 = "text/css">. bs-example-popover .popover {위치 : 상대; 디스플레이 : 블록; 플로트 : 왼쪽; 너비 : 240px; 여백 : 20px;} </style>동적 데모
먼저 렌더링을 살펴 보겠습니다
버튼을 클릭하면 버튼이 나타납니다.
실제로 코드를 읽는 것은 매우 간단합니다.
[code] <a id = "a2"data-parement = "right"data-content = "즉, 짧은, 뚱뚱한, 가난한, 못생긴, 못생긴, 못생긴, 어리 석고, 자위와 같은 다양한 충격적인 행동과 아이디어에 대한 경멸을 표현하기 위해. 실크 (또는"슬링 실크 "에서 실크 (또는 쓰기)"Dead ","Sling "," "Sling", "" "" "" "슬링"에서 발전한 것으로 말할 수 있습니다. 많은 중학교 고등학교가 학교에 중단되거나 식당 웨이터가되었거나 인터넷 카페 인터넷 관리자가되었으며, 도시의 부를 인정하기 위해 쓴 수프를 얻었습니다. href = "#"data-original-title = "실크 오리지널 의미"> 팝 오버를 전환하려면 클릭하십시오 </a> [코드]
단지 레이블이지만 버튼의 스타일 클래스를 제공 한 다음 몇 가지 속성을 제공하며 주로 팝업 박스를 표시하는 데 사용됩니다.
첫 번째 : Data-Original-Title- 제목
두 번째 : 데이터 콘텐츠 콘텐츠
셋째 : 데이터 배치 위치 (위, 하단, 왼쪽, 오른쪽)
그러나 이제 실행하면 버튼이 있고 버튼을 클릭하면 팝업 상자가 나타나지 않습니다. 그것은 매우 간단한 것으로 판명되었습니다. 즉, 이전 섹션의 툴팁과 마찬가지로 아직 초기화되지 않았습니다.
간단한 자바 스크립트 코드를 추가하십시오.
<script type = "text/javaScript"> $ ( "#a1"). popover (); </script>
네 방향
<div style = "margin-left : 200px; margin-top : 100px; margin-bottom;"> <div> <버튼 유형 = "버튼"Data-container = "body"data-toggle = "popover"data-placement = "left"data-content = "vivamus sagittis lacus laereet rutrum faucibus."> type = "button"data-container = "body"data-toggle = "popover"data-placement = "top"data-content = "vivamus sagittis lacus laoreet rutrum faucibus. sagittis lacus vel augue laoreet rutrum faucibus. "> 더 낮은 팝업 박스 </button> <버튼 유형 ="버튼 "data-container ="body "data-toggle ="popover "data-placement ="right "data-content ="vivamus sivaggle rutrum faucibus "> 오른쪽 총알>
그런 다음 JavaScript를 사용하여 활성화하십시오
<script type = "text/javaScript"> $ ( "#a1"). popover (); $ ( "[data-toggle = popover]"). popover (); </script>
선택적 추가 기능
성능 고려 사항의 경우 툴팁 및 팝업 구성 요소의 데이터 속성 API가 선택적으로 추가되므로 직접 초기화해야합니다.
버튼 그룹 및 입력 상자 그룹에서 팝업 박스를 사용할 때 추가 설정이 필요합니다.
프롬프트 상자가 .btn-group 또는 .input-group과 함께 사용되면 컨테이너를 지정해야합니다. 컨테이너 : '본문'옵션 (아래 문서 참조)이 원치 않는 부작용을 피하기 위해 (예 : 팝업 상자가 나타나는 경우, 그것과 협력하는 페이지 요소가 더 넓어 지거나 끊어 질 수 있습니다).
금지 된 페이지 요소에서 팝업 상자를 사용하는 경우 추가 요소를 추가해야합니다.
팝업 상자를 비활성화 또는 .Disabled 요소에 추가하려면 <div>의 팝업 상자에 추가 해야하는 페이지 요소를 감고 <Div> 요소에 팝업 상자를 적용하십시오.
용법
JavaScript를 통해 팝업 상자 활성화 :
$ ( '#example'). Popover (옵션)
옵션
데이터 속성 또는 JavaScript를 통해 옵션을 전달할 수 있습니다. 데이터 속성의 경우 Data-Animation = ""와 같은 데이터 다음에 옵션 이름을 넣어야합니다.
방법
$ (). Popover (옵션)
요소 세트의 팝업 상자를 초기화합니다.
$ ( '#element'). Popover ( 'show')
팝업 상자를 보여줍니다.
$ ( '#element'). Popover ( 'Hide')
팝업 박스를 숨 깁니다.
$ ( '#element'). Popover ( '토글')
팝업 상자를 보여 주거나 숨기십시오.
$ ( '#element'). Popover ( 'Destroy')
팝업 박스를 숨기고 파괴하십시오.
이벤트
$ ( '[data-toggle = popover]'). on ( 'ship.bs.popover', function () {alert (1);})여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.