모달 대화 상자

모달 상자는 무엇인가

간단히, 모달 윈도우 프레임은 원래의 인터페이스에서 첨가하고,

그리고 무대 뒤에서 페이지를 새로 고치지 않고 상호 작용을 보장합니다.

아도, 렌더링에서 첫번째보기

같이, 우리는 분명히 일반적인 모달 상자 스타일 창 위에 새 페이지를 볼 수 있습니다

모드 프레임 구조

그림에서 보면, 팝업 상단 층 양상 특정 프레임이 분으로 나눌 수 있습니다, 분명히하지 하나했다 :

1 텍스트 레이어

　　텍스트 레이어, 그는 세 층 아래 계층에서 원래의 페이지 존재한다

　　운영 스타일 없음

2 섀도우 층

　　회색 층은 쉐도우 층에있다 보면, 이것은 층의 세 층의 중간에 위치하고

　　우리는 (고정) 그림자 층을 찾아야, 그 텍스트의 상단에 레이어를 포함 할 수

3 층 팝업

　　우리는보고 층은 팝업 층 인 내용 (전체 전면 및 백 오피스 정보의 상호 작용)를 입력

　　그 그림자 층 위에 표시되도록, 우리는이 층을 필요로하는 3 층의 층의 상층이 (고정) 위치

주 : 차광 층 팝업 층 (고정) 위치 될 필요가 있기 때문에, 다음에 기재된 판정 Z- 인덱스를 표시 할 필요가있는

간단한 코드 모달 대화 상자

HTML 코드를 작성하기 1. 첫번째

2. 쓰기 CSS 스타일

클릭 이벤트를 바인딩 3. jQuery 코드

<! DOCTYPE은 HTML > 
< HTML은 LANG = "EN" > 
< 머리 > 
    < 메타 문자 집합 = "UTF-. 8" > 
    < 제목 > 간단한 모달 프레임 </ 제목 > 
    < 스타일 > 
        / *이 차광 층 패턴 놨는데하자 전체 화면 창 크기, 낮은 투명성의 수, 텍스트 상자의 내용을 볼 수 있도록 * / 
        .shadow { 
            폭 : 100vw , 
            높이 : 100vh , 
            배경 색 : 블랙 , 
            불투명도 :0.4 , 
            최고 : 0 ; 
            왼쪽 : 0 ; 
            위치 : 고정 , 
            디스플레이 : 없음 ;   / * 그 표시하지 말자, 그리고 우리가 버튼을 클릭 * / 
            Z-인덱스 : . 6 ; 
        } 
        / * 팝업 레이어가 제공되는 거의 모든 같은, 그것은 필요 참고 층 Z- 색인 세트 그림자의 비율 * / 
        .frame { 
            폭 : 300 픽셀에 의해 , 
            높이 : 300 픽셀별로 , 
            배경색 : 흰색 ;
            위치 : 고정 , 
            최고 : 200 픽셀 , 
            왼쪽 : 400 픽셀 , 
            Z-지수 : 66 ; 
            디스플레이 : 없음 ;   / * 그 표시하지 말자, 그리고 우리가 클릭 버튼 * / 
        } 
    </ 스타일 > 
</ 머리 > 
< 몸 > 
< ! - 여기에 우리가 우리의 텍스트 레이어로 몸을 넣어 -> 
< H1 > 이 텍스트 레이어입니다 </ H1 > 
< 단추 유형 = "버튼"클래스 = "쇼" > 지점 내가 모달 팝업 상자 </ 버튼 > 

<! - 다시 그림자 레이어를 만들 -> 
< DIV 클래스 = "그림자" > </ DIV > 

<! - 팝업 상자 레이어를 생성하기 -> 
< DIV 클래스 = "프레임" > 
    < 스팬 > 이있는 팝업 레이어 </ 스팬 > < BR > 
    < 입력 유형 = "텍스트" > 
    < 입력 유형 = "버튼" 값 = "제출"클래스 = "제출" > 
    < 입력유형 = "버튼" 값 = "취소" 클래스 = "취소" > 
</ DIV > 

</ 몸 > 
<! - 가져 오기 jQuery를 -> 
< 스크립트
   SRC = "http://code.jquery.com/jquery- 1.12.4.js " 
  무결성 ="+ bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU Qw82-SHA256 = " 
  crossOrigin ="익명 " > </ 스크립트 > 

< 스크립트 > 
    // 첫 번째 단계, 우리는 텍스트 레이어 버튼, 우리가 넣어 모달에 클릭을 모니터링해야 상자가 표시 
    ($를 ' .Show ' ).(클릭 기능 () { 
        $ ( '을.shadow ' )에 .Show (); 
        $은 ( ' .frame ' )에 .Show (); 
    }); 
    // 다음으로, 우리는 취소 버튼 팝업 층, 모달 상자에 넣어 숨겨의 클릭 모니터링해야 
    $를 ( ' .cancel ' ) .click ( 함수 () { 
        $ ( ' .shadow ' ) .hide (); 
        $ ( ' .frame ' ) .hide (); 
    }) 
    // 이 위치 단순 모드 프레임 완료 
</ 스크립트 > 

</ HTML >