JS와 CSS3로 멋진 팝업 효과를 만드는 방법

이 기사에서는 js와 css3를 사용하여 만든 멋진 팝업 창 효과를 공유하겠습니다. 전체 배경이 흐려져 단색과 투명도보다 훨씬 좋습니다. JS 팝업효과에 관심있는 친구들 함께 배워봐요

어제 집에서 TV를 보다가 퇴장할 때 팝업효과를 발견했는데, 배경 전체가 흐려져서 이 효과가 너무 멋지다고 생각했어요. , 단색 및 투명도보다 훨씬 낫습니다. 여러 인터페이스를 연속적으로 시도한 결과 CSS로 효과를 얻은 것으로 확인되었습니다. 그래서 오늘 아침 일찍 회사에 와서 신속하게 검색해 보았지만 호환성이 매우 좋지 않았습니다. 단 하나의 CSS 속성으로 수행할 수 있습니다. 순간 제가 너무 아무것도 모른다는 생각이 들었습니다~~

먼저 팝업창 구현을 떠올려보세요. 일반적으로 팝업창 레이어(popus)와 마스크 레이어(mask) 두 가지 레이어로 나누어집니다. , 저는 이 두 레이어에 익숙합니다. 모든 요소는 고정 위치로 설정되어 있습니다. 이 레이어와 절대값의 구체적인 차이점은 시도해 보면 알 수 있습니다. 마스크 레이어에는 많은 것이 필요하지 않습니다. 전체 화면을 덮을 수 있도록 다음과 같이 속성을 설정합니다.

.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의 필터가 아닙니다. 관심이 있으시면 여기를 클릭하여 자세히 설명하세요. 오늘은 블러 중 하나만 이야기하겠습니다. 먼저 아래 미리보기를 살펴보세요

추신: 현재 이 속성은 웹킷 브라우저만 지원하므로 css3 속성을 직접 사용하며 효과도 웹킷 브라우저에서 확인해야 합니다.

놀랍지 않나요? 작업 코드는 webkit-filter:blur(8px)입니다. 뒤에 있는 픽셀 값은 흐림 정도를 나타냅니다. 물론 일일 프로젝트에서는 일부를 추가할 수도 있습니다. 페이지를 더욱 생생하게 만들기 위한 애니메이션입니다. 이 경우의 전체 코드는 다음과 같습니다.

<p class=&#39;bg&#39;>
 <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/009/7aa8214ef730e52d2e48f11dd8eafbb7-1.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;bg.jpg&#39; / alt="JS와 CSS3로 멋진 팝업 효과를 만드는 방법" >
</p>
<p class=&#39;popus&#39;>
 效果是不是要好过纯色加透明呢
 <p>
 <p class=&#39;left btn &#39;>确实不错</p>
 <p class=&#39;right btn&#39;>也就那样</p>
 </p>
</p>

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 p{width:220px;margin:10px auto}
.popus p.btn{width:80px;padding:5px 10px;color:#000}
.left{float:left;border:1px solid #000}
.popus p.btn.right{float:right;color:#666}

js:

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

이게 끝인가요? 분명히 그렇지 않습니다. 콘솔을 보십시오.

창을 팝업할 때 다른 레이어의 클릭 이벤트를 비활성화해야 하지만 다른 레이어를 흐리게 했지만 해당 이벤트는 비활성화하지 않은 것으로 나타났습니다. 물론 해결 방법도 매우 간단합니다. 배경색이 없는 마스크 레이어를 추가하고 이를 페이지에 덮을 수 있습니다. 이렇게 하면 마스크 레이어를 클릭할 때마다 기본 이벤트가 실행되지 않습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

js 및 css3을 사용하여 회전 효과 구현

JS 및 Canves를 사용하여 클릭 버튼에 물 파급 효과 구현

javascript를 사용하여 폭포 흐름 동적 이미지 로딩 구현

위 내용은 JS와 CSS3로 멋진 팝업 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!