JavaScript ポップアップ DIV ウィンドウ レイヤーの作成方法effect_javascript スキル

このチュートリアルでは、最も一般的な言語と最も簡潔なコードを使用して、JavaScript ポップアップ DIV ウィンドウ レイヤー効果を作成する方法を示します。

ポップアップ DIV ウィンドウの作成は、Web サイト/Web ページの制作で遭遇する最も一般的な問題の 1 つである可能性があります。従来の JavaScript ポップアップ ウィンドウは、次の 2 つの理由から、現在の Web サイトのデザイン コンセプトには適していません。1 つは不親切です。「バン」という音を伴う固いポップアップ ダイアログ ボックスは、ユーザー エクスペリエンスにとって大きな課題です。次に、「十分に強力ではありません」と互換性がありません。かなりの数のブラウザがこの JS Alert() メソッドをブロックします。したがって、優れたユーザー エクスペリエンスを備えた Web サイトには、より合理的な解決策が必要です。ごくわずかな HTML コード、ごくわずかな CSS コード、および数行の JavaScript コードを使用して、ブラウザのデフォルトのポップアップ ウィンドウをシミュレートします (つまり、デフォルトの Alert() を置き換えます)。インターフェイスと機能）。

実装原則:

まず、ポップアップ ボックスのコンテンツを特別な DIV レイヤーに配置し、デフォルトで非表示にします (つまり、最初は非表示ですが、 CSS を使用するとこれを実現できます)。ユーザーがリンクをクリックする、またはリンク上でマウス カーソルを移動するなどのアクションを実行すると、以前に設定された非表示レイヤーがすべてのページ要素の上に表示されます (これは JS 操作を使用して実装されます)。さらに、ポップアップ DIV ウィンドウにボタンを設定し、ユーザーがこのボタンをクリックしたときにウィンドウを閉じる機能を実行します。

実装プロセス:

上で述べたように、最初に特別な DIV レイヤーを作成する必要があり、次にポップアップ ウィンドウのコンテンツをこのレイヤーに配置します。レイヤー内のDIV。ここでは、他の DIV レイヤーと区別するために、その ID に「popupcontent」という名前を付けます。

これは DIV ポップアップ ウィンドウの効果です!

ポップアップ ウィンドウの CSS 変更コード:

次に、上で作成したDIVポップアップレイヤーをCSSで美化してみましょう。最も重要なパラメータは、オーバーフロー (コンテンツのオーバーフロー)、可視性 (可視性)、および位置 (位置決め方法) です。同時に、このウィンドウ効果に他の多くのコードも追加しましたが、これらはこのウィンドウを美しくし、より豪華にするためにのみ使用されます。したがって、最終的に定義した CSS コードは次のようになります:

コードをコピー コードは次のとおりです:

# ポップアップコンテンツ{
位置: 絶対;
オーバーフロー: 非表示;
背景色:#F9F9F9; :1px Solid #333;
padding:5px;
}


上記の CSS コードの赤い部分からわかるように、この DIV レイヤーの初期デフォルト状態は非表示です。 。

上記のコードは必要に応じて美しくすることができますが、位置、可視性、オーバーフローの 3 つの属性は必ず保持してください。


JavaScript コードは、ポップアップ ウィンドウをトリガーして表示するために使用されます。

これは、おそらくこのチュートリアルで最も重要で興味深い部分です。次に、上記の DIV ポップアップ ウィンドウを表示および非表示にする 2 つのプロセス関数を作成します。もちろん、これら 2 つの関数にはいくつかのメイン ロジックが含まれます。
プロセス関数に順次含める必要があるロジック:

画面上の JavaScript ポップアップ ウィンドウの表示位置 (位置) を計算します。
ステータス バーを追加します。またはボタン) ポップアップ ウィンドウで、開いているウィンドウを閉じるために使用します。
ポップアップ ウィンドウを表示します。

簡単のため、この例では表示位置を上: 200、左: 200 に設定しています。つまり、ブラウザのコンテンツ ボックスの左上隅を座標として、下に 200PX、左に 200PX オフセットします。

ポップアップ ウィンドウのサイズは、ウィンドウの長さとウィンドウの幅という 2 つのパラメーターを含む表示関数のパラメーターで設定できます。

この例のコードを再開発する必要がある場合、特別な注意が必要な場所が 1 つあります。それは、ポップアップ ウィンドウの DIV レイヤーの DOM オブジェクトを取得することです。以下の getElementById 関数による ID 名。「Popcontent」の DOM オブジェクト。

コードをコピー コードは次のとおりです。 var PopUp = document.getElementById("popupcontent ");

この (ポップアップ ウィンドウ) DOM オブジェクトを取得した後、JS コード内のウィンドウの相対位置とウィンドウ サイズを変更できます。

コードをコピー コードは次のとおりです: popUp.style.top = "200px" ;// ブラウザのコンテンツ領域の上部からのウィンドウのオフセット値

popUp.style.left = "200px";// ブラウザのコンテンツ領域の左端からのウィンドウのオフセット値

popUp.style.width = w "px";//ウィンドウの幅

popUp.style.height = h "px";//ウィンドウの高さ


次に、開いているウィンドウを閉じるために、ウィンドウに「閉じる」ボタンを追加する必要があります。この関数を完全に実装するには、まずポップアップ ウィンドウ DIV にコンテンツを保存するためのグローバル変数を宣言する必要があります。これは、1 ページに内容の異なる複数のポップアップ ウィンドウを表示する場合、ボタンをこれらの DIV レイヤーに繰り返しコピーする必要がなくなり、動作ロジックが簡素化されるためです:

コードをコピー コードは次のとおりです:

if (baseText == null)baseText = PopUp.innerHTML

popUp。 innerHTML =baseText

"

ウィンドウを閉じる

"; 🎜 >
最後に注意が必要なのは、「閉じる」ボタンの位置です。これは、ボタン オブジェクトの上向きの空白辺を設定するだけで簡単に実装できます (空白辺の値は、ポップアップ ウィンドウ全体の DIV 高さよりわずかに小さく設定できます)。

この時点で、すべての動作ロジックが説明されました。最終的なポップアップ ウィンドウ表示関数の完全なコードは次のとおりです。

Copy code コードは次のとおりです。 document.getElementById("popupcontent"); popUp.style.top = "200px"; popUp.style.width = w "px"; 🎜>popUp.style.height = h "px ";

if (baseText == null)baseText = PopUp.innerHTML = baseText "

button onclick="hidePopup();

">ウィンドウを閉じる

";
var sbar = document.getElementById("statusbar");
sbar.style.marginTop = (parseInt(h)-40) "px" ;
popUp.style.visibility = "visible"
}



ポップアップウィンドウを非表示にします:


ポップアップ ウィンドウを非表示にするプロセスは非常に簡単です。最初にポップアップ ウィンドウの DIV の DOM オブジェクトを取得し、その属性を「hidden」に設定するだけです。




コードをコピー

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

function HidePopup(){
var PopUp = document .getElementById("popupcontent");

popUp.style.visibility = "hidden"; } 最終的にポップを実現します。アップ効果:

必要なのは、リンクまたはボタンの対応するイベントに JS 関数「showPopup()」を追加することだけです。

たとえば、マウスが特定の接続上を移動したときにウィンドウをポップアップする必要がある場合:

ポップアップを開く