平日はニュースに注目して、テンセントをよく閲覧しています。 しかし、コメントへの返信はほとんど見られません。そこで注意深く探してみると、ページ上のポップアップマスクを通して表示されていることがわかりました。 そこで、じっくりと勉強して自分でシミュレーションしてみました。使い勝手は良く、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 もう一つのポイントは絶対的な位置決めです。 何かを得たら忘れないように記録しましょう! |
>>: HTML 特殊文字エンコーディング CSS3 コンテンツに関する簡単な説明:「私は特別なシンボルです」
目次ノードイベントループイベントループ図メインスレッドイベントループタイマーキューの仕組み投票キュー...
この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...
シェルスクリプトはアクセス制御を設定し、複数回のログイン失敗後にIPをブロックしてSSHのブルートフ...
MongoDB はクロスプラットフォームであり、Windows と Linux の両方にインストール...
状況は以下のとおりです: (PS: 赤いボックスは iframe 領域を表し、灰色の四角形は上記の ...
1. まずパゴダを設置するインストール要件: Python バージョン: 2.6/2.7 (Pago...
この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有し...
Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明 Iframe ウェブペー...
目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...
Linux では、基本的に vi エディタのように「.sh」拡張子を持つテキストの処理と実行を記述す...
この記事では、主にnginxのフロントエンドとバックエンドに同じドメイン名を設定する方法を紹介し、皆...
序文MySQLクエリはselectコマンドを使用し、limitとoffsetパラメータを使用して、指...
準備1. 環境の説明:オペレーティング システム: Windows Server 2019 PHP ...
目次意味構造例カスタムショートカットキー元に戻すとやり直し録音と再生マクロ要約する意味リクエストをオ...
目次1. Nginx の紹介2. 画像サーバーの構築1. Nginx の紹介Nginx はリバース ...