ホームページ > 記事 > ウェブフロントエンド > CSSマスクの実装layer_html/css_WEB-ITnose
CSSマスクの実装layer_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:52:021835ブラウズ
偶然发现自己原来写了一个CSS遮罩层，虽然这个东西没什么技术含量，但如果本人离开公司后又遇见此类问题，那么可能又得花些时间来找资料了。所以决定还是把它记下来吧。
直接上代码吧。
第一步，html代码：
Java代码
上記のコードは 3 つの部分で構成されており、「登録手順」リンクをクリックするとポップアップ レイヤーが表示されます。
そして、bg はマスクレイヤーを表します。つまり、ポップアップレイヤーが表示されると、レイヤーの後ろのコンテンツが覆われます。最後のは、表示されたリンクを参照します。
これら 3 つの部分の CSS クラスは次のとおりです。
CSS コード
- .mydiv {
- #FCF4EA;
- border: 1px Solid #D00000;
- text-align: center;
- フォント-サイズ: 12px;
- z-index:99;
- left:30%;/*FF IE7*/ top: 20%;/*FF IE7*/
- margin-left:-150px!重要;/ * FF IE7 この値は幅の半分です */
- margin-top:-60px! important;/*FF IE7 この値は高さの半分です */
- margin-top:0px;
- Position:absolute;/ * FF IE7*/
- }
- width:700px;
- height:400px;
- text -align: left;
- }
- . bg {
- #ccc;
- フィルター:alpha(opacity=50);/*IE*/
- 不透明度:0.5;/*FF*/
- 位置:absolute;/ * IE6*/
- }
- 非常に重要な部分があります。つまり、背景マスクレイヤーが全画面をカバーする必要があるということです。この問題は解決するのが難しいため、JQuery を使用して解決しました。 、ページの初期化時の bg を設定します。 サイズ:
- Js code
.bg') .height($(document).height()); ;
function showDiv(orgId){
regAsyncController.getOrgNotes(orgId,function(data){
- $("#orgNote").html(data);
- $("#bg") . show(); : function(){
- $("#bg").hide();
- }
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。