JavaScriptポップアップウィンドウDIV層効果コード

本教程では、最も分かりやすい言語と最も簡潔なコードを使って、どのようにDIVウィンドウ層をJavaScriptポップアップする効果を実証します.
 
ポップアップDIVウィンドウを作成するのは、現在のウェブサイト/ホームページ制作で最もよく出会う問題の一つかもしれません.伝統的なJavaScriptポップアップは現在のウェブサイトのデザイン理念にはもう適合していません.理由は二つあります.まず、友好的ではない.第二に、互換性が足りないです.このようなJSのAlert()方法をかなり多くのブラウザで遮りました.したがって、より合理的な解決策が必要です.少数のHTMLコード、少数のCSSコードと数行のJavaScriptコードを使って、ブラウザのデフォルトのポップアップウィンドウをシミュレートします.
 
 
デモンストレーションのPopupを表示します インスタンスをダウンロード
 
実現原理:
 
まず、ポップアップボックスの内容を特別なDIV層に置いて、それをデフォルトで隠します.つまり初期は見えません.CSSを使って実現できます.ユーザーがあるアクションを実行すると、リンクをクリックしたり、リンクにマウスカーソルを移動したりします.前に設定した隠しレイヤーをすべてのページ要素の最上層に表示します.また、ポップアップDIVウィンドウでボタンを設定して実行します.ユーザがこのボタンをクリックした時、ウィンドウを閉じる機能もあります.
 
実現プロセス:
 
上記のように、まず特殊なDIV層を作成してから、私達はポップアップウィンドウの内容をこのDIV層の中に置いておきます.ここでは、他のDIV層と区別するために、そのIDを「popcontent」と命名します.

<div id="popupcontent">    DIV    !</div>

 
ポップアップウィンドウのCSS修飾コード:
 
次に、上に作成されたDIVポップアップ層をCSS美化します.その中で最も重要ないくつかのパラメータは、overflow(コンテンツオーバーフロー)、visibility(視認性)、およびposition(位置決め方式)である.同時に私もこのウィンドウの効果に多くの他のコードを追加しましたが、これらはただ美化に使うだけで、このウィンドウをより綺麗にします.したがって、私たちが最後に定義したCSSコードの形は次のようです.

#popupcontent{
position: absolute;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#F9F9F9;
border:1px solid #333;
padding:5px;
}

 
上のCSSコードの赤い部分から、このDIV層の初期デフォルト状態は見えないことが分かります.
 
これらのコードは必要に応じて美化できますが、position、visibility、overflowの3つの属性を残してください.
 
JavaScriptコードはポップアップウィンドウをトリガして表示するために使用されます.
 
これは本教程の一番重要で面白いところかもしれません.私たちはこれから2つのプロセス関数を作成して、上のDIVポップアップを表示したり、隠したりします.もちろん、この二つの関数の中にはいくつかの主体論理が含まれています.
 
プロセス関数には順序が含まれているロジックが必要です.
 

は、JavaScriptポップアップウィンドウのスクリーン上の表示位置(位置)を計算する.

は、開いた状態のウィンドウを閉じるために、ポップアップウィンドウにステータスバー(またはボタン)を追加します.

はポップアップウィンドウを表示する.

 
簡単のために、本例で設定した表示位置はTop:200、Left:200です.つまり、ブラウザのコンテンツボックスの左上隅を座標として、200 PXだけ下方にシフトし、200 PXだけ左にシフトする.
 
ポップアップウィンドウのサイズは、2つのパラメータを含む関数のパラメータに設定できます.ウィンドウの長さとウィンドウの幅です.
 
本例のコードを二次開発する必要がある場合、特に注意する必要があるところがあります.それはポップアップウィンドウ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の内容を格納するためにグローバル変数を宣言する必要があります.これは一つのページに複数のコンテンツが異なるポップアップウィンドウを表示する場合、これらのDIV層にボタンを複製する必要がないので、動作ロジックを簡単にします.

if (baseText == null) baseText = popUp.innerHTML;
 

   popUp.innerHTML = baseText +

      "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window
<button></div>";

 
最後の注意点はこの「閉じる」ボタンの位置付けです.これは簡単に実現できます.このボタンのオブジェクトの上向きの余白を設定すればいいです.
 
ここで、すべての行動ロジックを説明しました.最後のパチンコ表示関数の完全なコードは以下の通りです.

var baseText = null; 

function showPopup(w,h){     
var popUp = document.getElementById("popupcontent");      
popUp.style.top = "200px";     
popUp.style.left = "200px";     
popUp.style.width = w + "px";     
popUp.style.height = h + "px";      
if (baseText == null) baseText = popUp.innerHTML;     
popUp.innerHTML = baseText + "<div id=\"statusbar\"><button onclick=\"hidePopup();
\">Close window<button></div>";      
var sbar = document.getElementById("statusbar");     
sbar.style.marginTop = (parseInt(h)-40) + "px";     
popUp.style.visibility = "visible";
}

 
ポップアップウィンドウを隠す:
 
ポップアップウィンドウを隠すプロセスはかなり簡単です.ポップアップウィンドウのDIVのDOMオブジェクトを最初に取得し、そのプロパティを「隠し」に設定すればいいです.

function hidePopup(){
var popUp = document.getElementById("popupcontent");
popUp.style.visibility = "hidden";
}

 
HTMLコードを開拓して最終的にポップアップ効果を実現します.
 
私たちが必要なのは、あるリンクやボタンの対応イベントにJS関数「showPopup()」を追加すればいいです.
例えば、ある接続にマウスを移動するとき、ウィンドウをイジェクトする必要があります.

<a href="#" onmouseover="showPopup(300,200);" >Open popup</a>

 
ある接続をマウスでクリックした時にウィンドウをイジェクトする必要があります.

<a href="#" onclick="showPopup(300,200);" >Open popup</a>