JS+CSS3로 멋진 팝업 효과 만들기-PHP开发-php.cn

JS+CSS3로 멋진 팝업 효과 만들기

高洛峰

풀어 주다： 2016-12-07 13:50:48

원래의

1624명이 탐색했습니다.

어제 집에서 TV를 보다가 나갈 때 팝업 효과가 나타났어요. 배경 전체가 흐려졌죠. 단색과 투명도보다 이 효과가 훨씬 멋지다고 생각해서 여러 인터페이스를 연속해서 사용해 봤습니다. 그리고 최종적으로 효과를 확인해보니 CSS로 구현이 되어 있어서 오늘 아침 일찍 회사에 와서 급히 검색해 보니 호환성이 많이 좋지는 않지만 CSS 속성 하나로는 가능합니다. 순간 제가 너무 아는 게 없다는 생각이 들었습니다~~

우선 팝업창 구현을 떠올려보면 일반적으로 팝업창 레이어(popus)와 마스크 레이어로 나누어져 있습니다. 일반적으로 이 두 요소를 모두 고정 위치로 설정하는 것이 관례입니다. 이들 요소와 절대값 간의 구체적인 차이점은 일단 시도해 보면 알 수 있습니다. 마스크 레이어에는 많은 것이 필요하지 않습니다. 전체 화면을 덮을 수 있도록 다음과 같이 속성을 설정합니다.

.mask{position:fixed;top:0px;bottom:0px;left:0px;right:0px;background-color:#000;opacity:0.6;filter:alpha(opacity=60)}

로그인 후 복사

popus 레이어는 좀 더 까다롭습니다. 여기에는 두 가지 구현 방법이 있습니다.

1. 알려진 크기의 팝 창 는 아래와 같이 주로 위쪽, 왼쪽 및 음수 마진을 통해 구현됩니다.

.popus{width:300px;height:200px;position:fixed;left:50%;top:50%;margin-left:-150px;margin-top:-100px;background-color:#000}

로그인 후 복사

2. 팝업창의 크기를 알 수 없는 경우 js를 통해 팝업창 레이어의 너비와 높이를 가져오고, 그런 다음 위와 같이 설정합니다. 여기서는 별로 설명하지 않습니다.

3. css3가 지원되는 경우에는 팝업창의 너비와 높이를 알 필요 없이 다음과 같이 설정하면 됩니다.

.popus{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}

로그인 후 복사

주로 번역 속성을 통해 설정합니다. 오프셋 값 백분율은 자체 너비와 높이에 상대적이므로 원칙적으로는 첫 번째 작성 방법과 유사하지만 사용하기가 더 편리합니다.

주제로 돌아가서 PS에서 요소가 가우시안 블러 효과를 얻을 수 있도록 하는 주제로 돌아가겠습니다.

여기에 CSS 속성이 있습니다. 여기 필터는 IE의 필터가 아닙니다. 관심이 있는 경우 여기를 클릭하여 자세한 내용을 확인할 수 있습니다. 오늘은 블러 중 하나에 대해서만 이야기하겠습니다. 먼저 아래 미리보기를 살펴보세요

ps: 현재 이 속성은 웹킷 브라우저만 지원하므로 css3 속성을 직접 사용하며 효과도 webkit browsers

JS+CSS3로 멋진 팝업 효과 만들기

확인해 보세요. 작동하는 코드는 webkit-filter:blur(8px)입니다. 뒤에 있는 픽셀 값은 블러의 정도를 나타냅니다. 물론, 일일 프로젝트에서는 페이지를 더욱 생생하게 만들기 위해 애니메이션을 추가할 수도 있습니다.

<div class=&#39;bg&#39;>
 <img  src=&#39;bg.jpg&#39; / alt="JS+CSS3로 멋진 팝업 효과 만들기" >
</div>
<div class=&#39;popus&#39;>
 效果是不是要好过纯色加透明呢
 <div>
 <div class=&#39;left btn &#39;>确实不错</div>
 <div class=&#39;right btn&#39;>也就那样</div>
 </div>
</div>

로그인 후 복사

css:

*{padding:0px;margin:0px}
img{width:100%;margin:0px auto;display:block}
.bg.blur{-webkit-filter:blur(8px)}
.popus{width:400px;color:#000;;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);font-family:"微软雅黑";padding:20px 0px;font-weight:bold;background-color:rgba(255,255,255,0.6);border-radius:18px;text-align:center;padding:30px 0px;box-shadow:0px 0px 10px rgba(0,0,0,0.4);display:none}
.popus div{width:220px;margin:10px auto}
.popus div.btn{width:80px;padding:5px 10px;color:#000}
.left{float:left;border:1px solid #000}
.popus div.btn.right{float:right;color:#666}

로그인 후 복사

js：

$(&#39;.bg&#39;).on(&#39;click&#39;,function(){
 console.log(98)
 $(this).addClass(&#39;blur&#39;);
 $(&#39;.popus&#39;).show();
})
$(&#39;.btn&#39;).on(&#39;click&#39;,function(){
 $(&#39;.bg&#39;).removeClass(&#39;blur&#39;);
 $(&#39;.popus&#39;).hide();
})

로그인 후 복사

이게 끝이야? 분명히 그렇지 않습니다. 콘솔을 보세요

JS+CSS3로 멋진 팝업 효과 만들기

창을 팝업할 때 다른 레이어의 클릭 이벤트를 비활성화해야 하지만 다른 레이어를 흐리게 했지만 발견했습니다. 레이어를 사용하지만 해당 이벤트는 비활성화되지 않습니다. 물론 해결 방법도 매우 간단합니다. 배경색 없이 마스크 레이어를 추가하고 이를 페이지에 덮을 수 있습니다. 당연히 기본 이벤트가 트리거되지 않습니다.