JavaScriptポップアップウィンドウDIV層効果コード[
12254 ワード
documentオブジェクト)
オブジェクトはwindowとframesオブジェクトの属性で、ウィンドウまたはフレーム内に表示されるドキュメントです.
属性
alinkColor活動リンクの色(ALINK)ancherはHTMIアンカーポイントを一つ使います.A NAME=啝gt;タグ作成(属性自体もオブジェクトである)anchorrs arrayは、ドキュメントのアンカーポイントオブジェクトの配列を一覧表示します.(A NAME=嚖嗳gt;)bgColorドキュメントの背景色(BGCOLOR)cookieは、cookie.txtファイル内に格納されているメッセージです.これは、ドキュメントのオブジェクトの一つの属性のCogflor文書の色です.(名前として知られています.BODY钾gt;印のTEXT特性)フォームドキュメント内のフォームの一つ(咻lt;;FORM咻gt;)forms anyは、ドキュメントに表示される順番にフォームオブジェクトの配列を並べます.(属性自体もオブジェクトです.)lastModifiedドキュメントの最後の変更日付linkColorドキュメントのリンクの色、すなわち蒕lt;BODYӗgt;印のLINK特性(ユーザが観察していない文書にリンクする)linkドキュメントの中の一つの铎links arrayドキュメント内のlinkオブジェクトの1つの配列は、ドキュメント内に現れた順に並べられています.locationは現在、ドキュメントのURLを表示しています.ユーザは、document.locationを変更できません.ただし、window.locationを変更することができます.window.location自体も対象ですが、document.locationは対象ではありません.リンクされた文書のURLをクリックして、ユーザーが現在のドキュメントtitleドキュメントのタイトル(TITLE＿gt;)に到達することができます.
方法
指定された文書の内容をクリアするcloseをオフにします.文書の流れを開いてwriteを開いて文書を文書writelnに書き込んで文書をドキュメントに書き込み、改行で終わります.
[windowオブジェクト]
これはトップレベルのオブジェクトで、別のオブジェクトの属性ではなくブラウザのウィンドウです.
属性
default Statusデフォルトのステータスバーメッセージdocumentが現在表示しているドキュメント(この属性自体もオブジェクト)frameウィンドウにあるフレーム(FRAME＿咻gt;)のフレーム(この属性自体もオブジェクト)は、フレームオブジェクトの配列を示し、これらのオブジェクトをドキュメントに表示する順序で並べられます(属性自体もオブジェクトです).historyウィンドウの履歴リスト(属性自体もオブジェクト)lengthウィンドウ内のフレーム数locationウィンドウに表示されているドキュメントの完全な(絶対)URL(属性自体もオブジェクト)は、document.locationと混同しないでください.これは現在表示されているドキュメントのURLです.ユーザーはwindow.locationを変更することができます.しかし、document.locationを変更できませんでした.nameウィンドウが開くと、ウィンドウに与えられた名前のopenerは、window.openを使用して、現在のウィンドウのスクリプトがあるウィンドウを開きます.parentは現在のフレームのウィンドウの同義語を含んでいます.frameとwindowオブジェクトの属性self現在のウィンドウまたはフレームの同義語statusステータスバーのメッセージtopは、現在のフレームの最上階のブラウザウィンドウの同義語window現在のウィンドウまたはフレームの同義語を含んでいます.selfと同じです.
方法
alert()setTimeoutメソッドを終了するための作業close()ウィンドウを閉じるconfirm()を開きます.ユーザーはOKまたはキャンセルを選択できます.もしユーザがOKをクリックしたら、この方法はtrueに戻ります.Cacelをクリックしてfalse blur()にフォーカスを指定ウィンドウから離します.(これはNetscape Navigator 3.0 beta 3によって導入された新しい方法です.)focusは指定されたウィンドウをフロントに連れて(別の新しい方法)open()新しいウィンドウprompt()を開き、ユーザーはテキストをボックスに入力し、入力したテキストをスクリプトsetTimeout()に戻すことができます.指定したミリ秒数を待って、コマンドイベントハンドラを実行します.
イベントハンドラ
Onload()ページの読み込み時にOnload()ページを閉じるとトリガします.http://www.cnblogs.com/maxianghui/archive/2006/09/18/507418.html
本教程では、最も分かりやすい言語と最も簡潔なコードを使って、JavaScriptがDIVウィンドウ層をポップアップする効果をどのように作成するかを示します.
ポップアップDIVウィンドウを作成するのは、現在のウェブサイト/ホームページ制作で最もよく出会う問題の一つかもしれません.伝統的なJavaScriptのパチンコは現在のウェブサイトのデザイン理念に適合していません.理由は二つあります.まず、友好的ではない――硬いポップアップダイアログがあり、「ガチャン」を伴っています.というのは、ユーザー体験に大きな挑戦です.次に、互換性が足りないです.このJSのAlert()メソッドをかなり多くのブラウザが遮断しています.そこで、より合理的な解決策が必要です.少ないHTMLコード、少ないCSSコードと数行のJavaScriptコードを使って、ブラウザのデフォルトポップアップウィンドウをシミュレートします.(標準のAlert()インターフェースと機能を置き換える)
デモのPopupダウンロードのインスタンスを参照してください.
実現原理:
まず、私達はポップアップボックスの内容を特殊なDIV層に置いて、それをデフォルトで隠します.(つまり、最初は見えません.CSSを使って実行します.)ユーザーがある動作を実行する時、たとえば、リンクをクリックしたり、マウスカーソルをリンクに移動したりします.前に設定した隠しレイヤーをすべてのページ要素の一番上に表示します.(JS操作で実現します.また、DIVポップアップ画面でボタンを設定して実行します.ユーザがこのボタンをクリックした時にウィンドウを閉じる機能です.
実現プロセス:
上記のように、まず特殊なDIV層を作成してから、私達はポップアップウィンドウの内容をこのDIV層の中に置いておきます.ここでは、そのIDを他のDIV層と区別するために「poppcontent」と名づけます.
次に、上記作成したDIVポップアップ層をCSS美化します.その中で最も重要ないくつかのパラメータは、overflow(コンテンツオーバーフロー)、visibility(視認性)とpositionです.このウィンドウの効果にも多くの他のコードを追加しましたが、これは美化のためだけに使われています.したがって、最後に定義されたCSSコードの形は以下の通りです.
これらのコードは必要に応じて美化できますが、position、visibility、overflowの3つの属性を残してください.
JavaScriptコードはポップアップウィンドウをトリガして表示するために使用されます.
これは本教程の最も重要で面白いところかもしれません.次は2つのプロセス関数を作成して、上のDIVポップアップを表示したり、隠したりします.もちろん、この2つの関数の中にはいくつかの主体論理が含まれています.
プロセス関数には順序が含まれているロジックが必要です.
JavaScriptポップアップウィンドウのスクリーン上の表示位置を計算します.ポップアップウィンドウにステータスバー(またはボタン)を追加して、オープン状態のウィンドウを閉じます.
ポップアップウィンドウを表示します.簡単にするために、この例で設定した表示位置はTop:200、Left:200です.つまり、ブラウザのコンテンツボックスの左上隅を座標として、200 PXだけ下方にシフトし、200 PXだけ左にシフトします.
ポップアップウィンドウのサイズは、2つのパラメータを含む関数のパラメータに設定できます.ウィンドウの長さとウィンドウの幅です.
本例のコードを二次開発する必要がある場合、特に注意する必要があるところがあります.それはポップアップウィンドウDIV層のDOMオブジェクトを取得することです.以下のgetElementById関数を通じてIDの「Popcontent」というDOMオブジェクトを取得できます.
ここで、すべての行動ロジックを説明しました.最後のパチンコ表示関数の完全なコードは以下の通りです.
ポップアップウィンドウを隠すプロセスは簡単です.まずポップアップウィンドウのDIVのDOMオブジェクトを取得して、そのプロパティを「隠し」に設定すればいいです.
私たちが必要なのは、あるリンクやボタンの対応イベントにJS関数「showPopup()」を追加すればいいです.
例えば、ある接続にマウスを移動するとき、ウィンドウをイジェクトする必要があります.
オブジェクトはwindowとframesオブジェクトの属性で、ウィンドウまたはフレーム内に表示されるドキュメントです.
属性
alinkColor活動リンクの色(ALINK)ancherはHTMIアンカーポイントを一つ使います.A NAME=啝gt;タグ作成(属性自体もオブジェクトである)anchorrs arrayは、ドキュメントのアンカーポイントオブジェクトの配列を一覧表示します.(A NAME=嚖嗳gt;)bgColorドキュメントの背景色(BGCOLOR)cookieは、cookie.txtファイル内に格納されているメッセージです.これは、ドキュメントのオブジェクトの一つの属性のCogflor文書の色です.(名前として知られています.BODY钾gt;印のTEXT特性)フォームドキュメント内のフォームの一つ(咻lt;;FORM咻gt;)forms anyは、ドキュメントに表示される順番にフォームオブジェクトの配列を並べます.(属性自体もオブジェクトです.)lastModifiedドキュメントの最後の変更日付linkColorドキュメントのリンクの色、すなわち蒕lt;BODYӗgt;印のLINK特性(ユーザが観察していない文書にリンクする)linkドキュメントの中の一つの铎links arrayドキュメント内のlinkオブジェクトの1つの配列は、ドキュメント内に現れた順に並べられています.locationは現在、ドキュメントのURLを表示しています.ユーザは、document.locationを変更できません.ただし、window.locationを変更することができます.window.location自体も対象ですが、document.locationは対象ではありません.リンクされた文書のURLをクリックして、ユーザーが現在のドキュメントtitleドキュメントのタイトル(TITLE＿gt;)に到達することができます.
方法
指定された文書の内容をクリアするcloseをオフにします.文書の流れを開いてwriteを開いて文書を文書writelnに書き込んで文書をドキュメントに書き込み、改行で終わります.
[windowオブジェクト]
これはトップレベルのオブジェクトで、別のオブジェクトの属性ではなくブラウザのウィンドウです.
属性
default Statusデフォルトのステータスバーメッセージdocumentが現在表示しているドキュメント(この属性自体もオブジェクト)frameウィンドウにあるフレーム(FRAME＿咻gt;)のフレーム(この属性自体もオブジェクト)は、フレームオブジェクトの配列を示し、これらのオブジェクトをドキュメントに表示する順序で並べられます(属性自体もオブジェクトです).historyウィンドウの履歴リスト(属性自体もオブジェクト)lengthウィンドウ内のフレーム数locationウィンドウに表示されているドキュメントの完全な(絶対)URL(属性自体もオブジェクト)は、document.locationと混同しないでください.これは現在表示されているドキュメントのURLです.ユーザーはwindow.locationを変更することができます.しかし、document.locationを変更できませんでした.nameウィンドウが開くと、ウィンドウに与えられた名前のopenerは、window.openを使用して、現在のウィンドウのスクリプトがあるウィンドウを開きます.parentは現在のフレームのウィンドウの同義語を含んでいます.frameとwindowオブジェクトの属性self現在のウィンドウまたはフレームの同義語statusステータスバーのメッセージtopは、現在のフレームの最上階のブラウザウィンドウの同義語window現在のウィンドウまたはフレームの同義語を含んでいます.selfと同じです.
方法
alert()setTimeoutメソッドを終了するための作業close()ウィンドウを閉じるconfirm()を開きます.ユーザーはOKまたはキャンセルを選択できます.もしユーザがOKをクリックしたら、この方法はtrueに戻ります.Cacelをクリックしてfalse blur()にフォーカスを指定ウィンドウから離します.(これはNetscape Navigator 3.0 beta 3によって導入された新しい方法です.)focusは指定されたウィンドウをフロントに連れて(別の新しい方法)open()新しいウィンドウprompt()を開き、ユーザーはテキストをボックスに入力し、入力したテキストをスクリプトsetTimeout()に戻すことができます.指定したミリ秒数を待って、コマンドイベントハンドラを実行します.
イベントハンドラ
Onload()ページの読み込み時にOnload()ページを閉じるとトリガします.http://www.cnblogs.com/maxianghui/archive/2006/09/18/507418.html
本教程では、最も分かりやすい言語と最も簡潔なコードを使って、JavaScriptがDIVウィンドウ層をポップアップする効果をどのように作成するかを示します.
ポップアップDIVウィンドウを作成するのは、現在のウェブサイト/ホームページ制作で最もよく出会う問題の一つかもしれません.伝統的なJavaScriptのパチンコは現在のウェブサイトのデザイン理念に適合していません.理由は二つあります.まず、友好的ではない――硬いポップアップダイアログがあり、「ガチャン」を伴っています.というのは、ユーザー体験に大きな挑戦です.次に、互換性が足りないです.このJSのAlert()メソッドをかなり多くのブラウザが遮断しています.そこで、より合理的な解決策が必要です.少ないHTMLコード、少ないCSSコードと数行のJavaScriptコードを使って、ブラウザのデフォルトポップアップウィンドウをシミュレートします.(標準のAlert()インターフェースと機能を置き換える)
デモのPopupダウンロードのインスタンスを参照してください.
実現原理:
まず、私達はポップアップボックスの内容を特殊なDIV層に置いて、それをデフォルトで隠します.(つまり、最初は見えません.CSSを使って実行します.)ユーザーがある動作を実行する時、たとえば、リンクをクリックしたり、マウスカーソルをリンクに移動したりします.前に設定した隠しレイヤーをすべてのページ要素の一番上に表示します.(JS操作で実現します.また、DIVポップアップ画面でボタンを設定して実行します.ユーザがこのボタンをクリックした時にウィンドウを閉じる機能です.
実現プロセス:
上記のように、まず特殊なDIV層を作成してから、私達はポップアップウィンドウの内容をこのDIV層の中に置いておきます.ここでは、そのIDを他のDIV層と区別するために「poppcontent」と名づけます.
<div id="popupcontent"> DIV !</div>次に、上記作成した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;
}これらのコードは必要に応じて美化できますが、position、visibility、overflowの3つの属性を残してください.
JavaScriptコードはポップアップウィンドウをトリガして表示するために使用されます.
これは本教程の最も重要で面白いところかもしれません.次は2つのプロセス関数を作成して、上のDIVポップアップを表示したり、隠したりします.もちろん、この2つの関数の中にはいくつかの主体論理が含まれています.
プロセス関数には順序が含まれているロジックが必要です.
JavaScriptポップアップウィンドウのスクリーン上の表示位置を計算します.ポップアップウィンドウにステータスバー(またはボタン)を追加して、オープン状態のウィンドウを閉じます.
ポップアップウィンドウを表示します.簡単にするために、この例で設定した表示位置はTop:200、Left:200です.つまり、ブラウザのコンテンツボックスの左上隅を座標として、200 PXだけ下方にシフトし、200 PXだけ左にシフトします.
ポップアップウィンドウのサイズは、2つのパラメータを含む関数のパラメータに設定できます.ウィンドウの長さとウィンドウの幅です.
本例のコードを二次開発する必要がある場合、特に注意する必要があるところがあります.それはポップアップウィンドウDIV層のDOMオブジェクトを取得することです.以下のgetElementById関数を通じてIDの「Popcontent」というDOMオブジェクトを取得できます.
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 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";
}私たちが必要なのは、あるリンクやボタンの対応イベントにJS関数「showPopup()」を追加すればいいです.
例えば、ある接続にマウスを移動するとき、ウィンドウをイジェクトする必要があります.
<a href="#" onmouseover="showPopup(300,200);" >Open popup</a><a href="#" onclick="showPopup(300,200);" >Open popup</a>