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

IE 8/Chrome/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 コンテンツに関する簡単な説明:「私は特別なシンボルです」

推薦する

Nodeイベントループの包括的な理解

目次ノードイベントループイベントループ図メインスレッドイベントループタイマーキューの仕組み投票キュー...

カルーセルの制作方法を実現するjs

この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...

ブルートフォース攻撃を防ぐためのシェルスクリプト設定

シェルスクリプトはアクセス制御を設定し、複数回のログイン失敗後にIPをブロックしてSSHのブルートフ...

Linux での MongoDB のインストールに関するチュートリアル

MongoDB はクロスプラットフォームであり、Windows と Linux の両方にインストール...

IE6 の iframe の水平スクロール バーの解決策

状況は以下のとおりです: (PS: 赤いボックスは iframe 領域を表し、灰色の四角形は上記の ...

pagodaを使用してionCube拡張機能をインストールする方法

1. まずパゴダを設置するインストール要件: Python バージョン: 2.6/2.7 (Pago...

Vueはプラグインを使用して画像を比例してカットします

この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有し...

Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明

Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明 Iframe ウェブペー...

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...

bashコマンドの使い方の詳細な説明

Linux では、基本的に vi エディタのように「.sh」拡張子を持つテキストの処理と実行を記述す...

nginx のフロントエンドとバックエンドに同じドメイン名を設定する方法

この記事では、主にnginxのフロントエンドとバックエンドに同じドメイン名を設定する方法を紹介し、皆...

MySQL クエリにおける LIMIT の大きなオフセットによって引き起こされるパフォーマンス低下の分析

序文MySQLクエリはselectコマンドを使用し、limitとoffsetパラメータを使用して、指...

Windows Server 2019 IIS10.0+PHP(FastCGI)+MySQL 環境構築チュートリアル

準備1. 環境の説明:オペレーティング システム: Windows Server 2019 PHP ...

Javascript実践におけるコマンドモードの詳しい説明

目次意味構造例カスタムショートカットキー元に戻すとやり直し録音と再生マクロ要約する意味リクエストをオ...

ローカル画像サーバーのNginx構成の実装

目次1. Nginx の紹介2. 画像サーバーの構築1. Nginx の紹介Nginx はリバース ...