Latest web development tutorials

재단 모달 상자

모달 상자는 페이지 헤더 팝업에 표시됩니다.

우리는 컨테이너 요소에 (같은 수 있습니다 <div id="myModal" 고유 ID를 사용), 및 추가 .reveal-modal 클래스 및 data-reveal 모달 상자를 추가하는 속성을. 우리의 모든 요소에서 사용할 수있는 data-reveal-id=" id " " 속성 알리 오픈 모달 상자. 아이디 아이디가 컨테이너와 일치해야합니다 (예를 들면 "myModal"입니다).

당신은 모달 모달 상자를 닫습니다 박스 외부 영역을 클릭합니다. 당신은 버튼 모달 상자를 닫을 수 있습니다 <a> 레이블을 추가 .close-reveal-modal 클래스입니다.

참고 : 슬라이더 자바 스크립트가 필요합니다. 그래서 당신은 한답니다의 JS를 초기화해야합니다 :

예

<! - 모달 트리거 ->
<버튼 유형 = "버튼"클래스 = "버튼"데이터 공개-ID는 = "myModal"> 모달를 열려면 클릭 </ 버튼>

<! - 모달 콘텐츠 ->
<사업부 아이디 = "myModal"클래스 = "공개 모달"데이터 공개>
<H2는> 모달의 제목. < / H2>
<P> 모달의 일부 텍스트 . </ P>
<P> 모달의 일부 텍스트 . </ P>
<A 클래스 = "close-reveal -modal"> 및 시간; </ A>
</ DIV>

<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>

»시도

모달 상자 크기

당신은 모달 상자의 크기를 설정하는 모달 상자 컨테이너에 다음과 같은 클래스를 추가 할 수 있습니다 :

  • .tiny : 30 % 폭
  • .small : 40 % 폭
  • .medium : 60 % 폭
  • .large : 70 % 폭
  • .xlarge : 95 % 폭
  • .full : 100 % 너비와 높이

주 : 정제, 노트북의 디폴트 PC 시스템은 작은 화면의 폭의 80 %는 100 %의 폭이다.

예

<사업부 아이디 = "myModal"클래스 = "공개 모달 작은 | 작은 | 매체 | 큰 | 초대형 | 전체"데이터 공개>

»시도

임베디드 모달 상자

당신은 모달 상자의 모달 상자를 포함 할 수 있습니다, 첫 번째 모달 상자에 새로운 트리거 버튼을 추가 할 수 있습니다. 당신은 포함 된 모달 상자에 대한 고유 ID를 설정해야합니다 :

예

<! - 모달 트리거 ->
href가가 = "#" 클래스 = "button" data-reveal-id = "myModal"> 모달를 열려면 클릭 </ A>

<! - 첫 번째 모달 ->
<사업부 아이디 = "myModal"클래스 = "공개 모달"데이터 공개>
<H2> 첫 모달 </ H2 >
<P> 일부 텍스트 .. </ P>
<P> <a의 HREF = "#" data-reveal-id = "secondModal" 클래스 = "button"> 열기 두 번째 모달 </ A> </ P>
<A 클래스 = "close-reveal -modal"> 및 시간; </ A>
</ DIV>

<! - 두 번째 모달 ->
<사업부 아이디 = "secondModal"클래스 = "공개 모달"데이터 공개>
<H2> 타다! 두 번째 모달 < / H2>
<P> 일부 텍스트 .. </ P>
<A 클래스 = "close-reveal -modal"> 및 시간; </ A>
</ DIV>

»시도

두 번째 모달 상자가 첫 번째 모달 상자를 대체합니다. 첫 번째 모달 상자를 닫지 않고 두 번째 모달 상자를 엽니 다. 두 번째 모달 상자에 추가 할 수있는 data-options="multiple_opened:true;" ;" 속성 :

예

<사업부 아이디 = "secondModal"클래스 = "공개 모달"데이터 공개 데이터 옵션 = "multiple_opened : 참;">

»시도