jquery는 아름다운 팝업 레이어 프롬프트 메시지를 생성합니다.-JS 튜토리얼-php.cn

jquery는 아름다운 팝업 레이어 프롬프트 메시지를 생성합니다.

WBOY

풀어 주다： 2016-05-16 16:24:44

원래의

1378명이 탐색했습니다.

오늘은 jquery 기반의 멋진 팝업 레이어 프롬프트 메시지를 가져왔습니다. 이 예제 페이지는 이동 버튼으로 초기화됩니다. 이동 버튼을 클릭하면 프롬프트 팝업 레이어가 애니메이션됩니다. 렌더링은 다음과 같습니다.

구현 코드.

html 코드:

코드 복사 코드는 다음과 같습니다.

<버튼 id='go'>
GO

              ✔
> > 성공
> >                  예약 확인 이메일을 확인하세요. 곧 뵙겠습니다!
>           <버튼 id='ok'>
알았어

           $('#go').click(function () {
               go(50);
        });
$('#ok').click(함수 () {
               go(500);
        });
setTimeout(함수 () {
               go(50);
}, 700);
setTimeout(함수 () {
               go(500);
}, 2000);
함수 go(nr) {
                 $('.bb').fadeToggle(200);
                  $('.message').toggleClass('comein');
                $('.check').toggleClass('scaledown');
                $('#go').fadeToggle(nr);
}
//@ sourceURL=pen.js

CSS 코드:

코드 복사

코드는 다음과 같습니다.

  본문, HTML

        {

            높이: 100%;

            글꼴 크기: 20px;

            글꼴 계열: Source Sans Pro;

        }

        .b, .bb

        {

            위치: 절대;

            너비: 100%;

            높이: 100%;

            배경: url("kje4L5j.jpg");

            배경 첨부: 고정;

            배경 크기: 표지;

            배경 위치: 중앙;

        }

        .bb

        {

            배경: url("bDBs0et.jpg");

            배경 첨부: 고정;

            배경 크기: 표지;

            배경 위치: 중앙;

            표시: 없음;

        }

        #가다

        {

            위치: 절대;

            상단: 30px;

            왼쪽: 50%;

            변환: 번역(-50%, 0%);

            색상: 흰색;

            테두리: 0;

            배경: #71c341;

            너비: 100px;

            높이: 30px;

            테두리 반경: 6px;

            글꼴 크기: 1rem;

            전환: 배경 0.2초 용이성;

            개요: 없음;

        }

        #go:호버

        {

            배경: #8ecf68;

        }

        #go:활성

        {

            배경: #5a9f32;

        }

        .메시지

        {

            위치: 절대;

            상단: -200px;

            왼쪽: 50%;

            변환: 번역(-50%, 0%);

            너비: 300px;

            배경: 흰색;

            테두리 반경: 8px;

            패딩: 30px;

            텍스트 정렬: 중앙;

            글꼴 두께: 300;

            색상: #2c2928;

            불투명도: 0;
            전환: 상위 0.3초 입방 베지어(0.31, 0.25, 0.5, 1.5), 불투명도 0.2초 Ease-in-out;

        }

        .메시지 .체크

        {

            위치: 절대;

            상단: 0;

            왼쪽: 50%;

            변환: 변환(-50%, -50%) 스케일(4);

            너비: 120px;

            높이: 110px;

            배경: #71c341;

            색상: 흰색;

            글꼴 크기: 3.8rem;

            패딩 상단: 10px;

            테두리 반경: 50%;

            불투명도: 0;

            전환: 0.2초 0.25초 입방 베지어(0.31, 0.25, 0.5, 1.5) 변환, 불투명도 0.1초 0.25초 완화;

        }

        .메시지 .scaledown

        {

            변환: 변환(-50%, -50%) 배율(1);

            불투명도: 1;

        }

        .메시지 p

        {

            글꼴 크기: 1.1rem;

            여백: 25px 0px;

            패딩: 0;

        }

        .message p:nth-child(2)

        {

            글꼴 크기: 2.3rem;

            여백: 40px 0px 0px 0px;

        }

        .message #확인

        {

            위치: 상대;

            색상: 흰색;

            테두리: 0;

            배경: #71c341;

            너비: 100%;

            높이: 50px;

            테두리 반경: 6px;

            글꼴 크기: 1.2rem;

            전환: 배경 0.2초 용이성;

            개요: 없음;

        }

        .message #ok:hover

        {

            배경: #8ecf68;

        }

        .message #ok:활성

        {

            배경: #5a9f32;

        }

        .컴인

        {

            상단: 150px;

            불투명도: 1;

        }