JS+CSS3でクールなポップアップエフェクトを作成

昨日家でテレビを見ていたとき、背景全体がぼやけているポップアップ効果に気づきました。この効果は単色や透明よりもはるかに優れていると思い、いくつかのインターフェイスを続けて試しました。最終的に css で効果が得られると判断したので、今朝早く会社に来て急いで検索しましたが、互換性は非常に悪いですが、CSS 属性 1 つだけで実現できます。私はあまりにも知識が少ないと感じました~~

まず、ポップアップ ウィンドウの実装を思い出してください。通常、ポップアップ ウィンドウ レイヤー (popus) とマスク レイヤー (マスク) の 2 つのレイヤーに分かれています。私はこれら 2 つのレイヤーに慣れています。すべての要素が固定位置に設定されています。実際に試してみると、絶対値との具体的な違いがわかります。マスク レイヤーには多くの必要はありませんが、画面全体をカバーできるようにそのプロパティを次のように設定します。

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

Popus レイヤーは少し面倒です。ここでは 2 つの実装方法があります

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%)}

これは主に、translate 属性を通じて設定されます。 value のパーセントは幅と高さに対する相対値なので、原理的には最初の書き込み方法と同じですが、より便利に使用できます。 topicトピックに戻って、メイントピックに戻りましょう。これは、要素がPSでガウスぼかし効果を達成できるようにすることです。

ここに CSS 属性があります: filter ここでのフィルターは IE のフィルターではないことに注意してください。興味がある場合は、ここをクリックしてください。今日はぼかしの 1 つだけについて説明します。まず、以下のプレビューをご覧ください

PS: 現在、この属性は Webkit ブラウザーのみをサポートしているため、css3 属性を直接使用しており、効果も Webkit ブラウザーで表示する必要があります。

素晴らしいと思いませんか? この行は、webkit-filter:blur(8px) です。もちろん、日常のプロジェクトでは、ぼかしの度合いを表すピクセル値を追加することもできます。ページをより鮮明にするためのアニメーション。この場合の完全なコードは次のとおりです。

<div class=&#39;bg&#39;>
 <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/352/549/557/1481089828563681.png?x-oss-process=image/resize,p_40"  class="lazy"  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:

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

これで終わりですか?明らかにそうではありません。コンソールを見てください

ウィンドウをポップアップするとき、他のレイヤーのクリック イベントを無効にする必要がありますが、他のレイヤーをぼかしたにもかかわらず、対応するイベントを無効にしていないことがわかりました。もちろん、解決策も非常に簡単です。背景色なしでマスク レイヤーを追加し、それをページ上で覆うことで、マスク レイヤーをクリックするたびに、基になるイベントがトリガーされなくなります。