Firefox と互換性のあるコメント返信ポップアップマスク効果実装アイデア

平日はニュースに注目して、テンセントをよく閲覧しています。

しかし、コメントへの返信はほとんど見られません。そこで注意深く探してみると、ページ上のポップアップマスクを通して表示されていることがわかりました。

そこで、じっくりと勉強して自分でシミュレーションしてみました。使い勝手は良く、IE 8/Chrome/Firefox と互換性があります。

アイデア: メインページとマスクは 2 つの異なるページであり、マスクは js を使用して iframe を通じて読み込まれます。

コードは次のとおりです。

インデックス.html

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<ヘッド>
<meta http-equiv="コンテンツタイプ" content="text/html;charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<title>iframe の追加</title>
<スタイルタイプ="text/css">
html、本文{高さ:100%;パディング:0px;マージン:0px;}
</スタイル>
</head>
<本文>
<div><input type="button" value="show" id="show-id"/></div>
<div><input type="button" value="test" id="test-id"/></div>
<script type="text/javascript">
$("#show-id").on("click",function(){
$(top.document.body).append('<iframe src="subiframe.html" id="np-pop-iframe" allowtransparency="true" frameborder="0" scrolling="no" style="width: 100%; z-index: 9999; position: fixed; top: 0px; left: 0px; border: none; overflow: hidden; height: 100%;" data-nick="" data-pic="" data-id="" parentid=""></iframe>');
});
$("#test-id").on("click",function(){
アラート("テスト");
});
</スクリプト>
</本文>
</html>

サブフレーム.html:

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<ヘッド>
<meta http-equiv="コンテンツタイプ" content="text/html;charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<title>ドキュメント</title>
<スタイルタイプ="text/css">
html、本文{高さ:100%;パディング:0px;マージン:0px;}
.np-popframe-bg-opacity{
フィルター: アルファ(不透明度=50);
-moz-不透明度: 0.5;
不透明度: 0.5;
}
.ラッパー{
位置: 絶対;
border:1px 赤一色;
幅:800ピクセル;
高さ: 800ピクセル;
背景: #fff;
上:1000ピクセル;
左:500px;
}
</スタイル>
</head>
<body class="iframe-body" style="background-image: none; width: 100%; height: 100%; background-position: initial initial; background-repeat: initial initial;">
<div class="np-popframe-bg-opacity" style="高さ: 100%; 幅: 100%; 背景色: #000;"></div>
<div class="np-popframe-bg" id="np-popframe-bg-id" style="高さ: 100%; 幅: 100%; 位置: 絶対; 上: 0px; 左: 0px;"></div>
<div class="wrapper" id="wrapper-id"></div>
</本文>
<script type="text/javascript">
（関数（）{
$("#wrapper-id").animate({top:"100px"},"slow");
$("#np-popframe-bg-id").on("クリック",function(){
//$(window.parent.document.getElementById("np-pop-iframe")).remove();
$("#np-pop-iframe",window.parent.document).remove();
});
})(jQuery);
</スクリプト>
</html>

ここではフィルターが必要です。読み込まれたマスクを透明にします。

1 np-popframe-bg-idの主な機能は、コメントボックスの外側の領域を表示することです。この領域をマウスでクリックすると、iframe が削除されます。

2. div は 100% の高さに設定する必要があります。その前に html, body{height:100%;} css を追加する必要があります。そうしないと無効になります。

3 もう一つのポイントは絶対的な位置決めです。

何かを得たら忘れないように記録しましょう！

<<: CSS変換ページめくりアニメーションレコードの実装

>>: HTML 特殊文字エンコーディング CSS3 コンテンツに関する簡単な説明:「私は特別なシンボルです」