            |
| フォーラム | チュートリアル | マガジン | サービス | ビデオ | ニュース | ブログ |
| ||
フルページオーバーレイウィンドウAbraham Chaffin
ページのポップアップウィンドウのオーバーレイをフル フルページではどのようにポップアップウィンドウは、既存のオーバーレイを作成するこのチュートリアルで学ぶことが html ページ. この技術を、多くの場合、ビデオの表示に使用されています, ムービーファイル, 写真, またはフォームがWebページ内の要素をユーザーがクリック.
表示例 導入このテクニックは、ポップアップウィンドウを1つのような一般的ではないと思うかもしれない. それは別のウィンドウではありません html ブラウザではなく、むしろ事業部は、既存のオーバーレイが開かれる html ページ. 半透明には、 divされており、良い効果は、ユーザーが作成することができますが、他のページに戻る（事業部）は、ウィンドウを終了することによって得ることができます知っている上にいる.この達成の背景にあるメソッドはかなり単純だ: には、 divの初期状態になるのオーバーレイのページ それには隠されているコンテンツの内側の html. 開口部は、当初は事業部タグと終了タグとは、要素間には何もなしに表示されることを意味している. には、 divの表示を開始する まず最初に選択する必要がありますとなる要素は、ユーザーをクリックして, 覆いかぶさる, 等. の動作に割り当てる. あなたも始めていることにしたい場合は、ページが読み込ま. 一般的には、イメージがあるだろう, ボタン, またはテキストは、ユーザーがJavaScriptの関数を開始するためのクリック. 表示されている場合には、 div それは基本的に、または''が空白にされている要素は、デフォルト値に戻ることは出来ないの表示値の表示値が削除されているJavaScriptの関数で表示される. 第二には、 divの奥 html に満ちている定義済みの html コードでは、どんな場合は、オーバーレイウィンドウに表示されることを望んでいる、コードされる. この例では中心が画面の中央には、ビデオのためのテーブルの中にビデオがあるだろう. また、ウィンドウまたは半透明のポップアップ部に近い密接なボタンが表示されます. ポップアップウィンドウの[閉じる]ボタンをクリック ときに表示されていたのは、逆転を開始. それをなしには、 divの表示値を代入し、内側のセット html 何事に戻る. のコードここを最初からのコードとし、それ以上の仕上げぽつぽつなることです:ストリクトモードこのコード行は、非常には、ドキュメントの上部にあるIE7のに厳格なモードを有効にする必要があります. IE7の固定位置を実装し、このチュートリアルでは動作しませんでサポートされていません. また、この固定位置を、すべてのブラウザでは動作しない場合があります注意しては、新しいCSSのプロパティです.CSSのスタイルのは、 divのCSSのスタイルに目を通すと、そのページの残りのオーバーレイは、半透明部を見てみよう:は、 Z -インデックスのCSSプロパティのドロップダウンメニューなど、他のすべての要素の上Ž空間の層を高めるために使用されます, 等. 10000に設定するとかなりよくŽ定義をインデックスしているほとんどの他の要素の上になることが出来る. 中で最も難しい部分は、複数のブラウザで半透明部効果を得て. Firefoxの, Internet Explorerの, サファリ, オペラ, これらすべてのブラウザと同じ半透明のCSSプロパティを設定を使用しても、 Googleのクロム=またはいない. すなわち、フィルタの設定を使用しています. Mozilla Firefoxのの"は、混合酸化物の不透明度". を使用し、他の"不透明度"は、私にとって、最も理にかなっている期待は、将来的には、標準になるだろう. 最初の行"＃ displaybox （" displaybox IDの要素には、次のスタイルを割り当て. 不透明にするには、次の5つの線が違っている方法を50 ％に設定 " フィルタ: アルファ（不透明度= 50 ） ; / *古い例* / フィルタ:Progidは:Dximagetransform.microsoft.アルファ（不透明度= 50 ） ; / *例* / -悪運-混濁: .50 ; / *古いmozillaの* / - khtml -混濁: 0.5 ; / *古いサファリ* / 不透明度: 0.5 ; / *現在のMozillaでサポートされている, サファリ, とオペラ* / " 単純に5変更, .何のように5 〜 50の値. の例の50 ％の不透明度に設定されて. "背景色:＃ 000000 ;"コースの背景色を黒とし、 50 ％透明になるには灰色. "位置:固定;"相対または絶対的には、ページの流れの中では固定される位置を設定します. これは、要素を移動することができますので、他の要素の上に固定されるフロートと、ウィンドウではなく、ページや他の要素に. 相対位置は、ページのフローでの要素の配置を移動され、その周囲他の要素に移動. 絶対上のが、ページには、ウィンドウの相対的なものであるフロート, のみの場合には、ページの上部にある滞在には、この要素の使用. "頂上:0px ;左:0px ;幅:100 ％ ;高さ:100 ％ ;"上部の左コーナーと限りでは、ウィンドウ全体に広がって行くことができますが、事業部は、半透明の場所. "テキストを配置:センター;垂直配置:中央;"私の最初の試みは、ページの中央には、 div要素の中にセンターです. JavaScriptを現在の措置を取る場合、ユーザーは、ページとやり取りし、 JavaScriptの関数を実行する要素を変更するには、 javascriptを見て:この関数の最初の行"は、関数名を宣言関数をクリックして（ ） （"は、ページ全体に使用する. "予めVar Thediv =文書.（ ' displaybox ' ） getelementbyid ; " "変数" displaybox "のIDでは、 divにThediv "の値を設定します. " Thediv "変数は、関数の残りの部分を介して、ブラウザを再されていない場合は、使用される要素を取得displaybox. "もし（ Thediv.スタイル.表示== "なし" ） （"基本的に言う, "もし今Thediv表示されていないことをお知らせするために私は何ですか." Thediv "を表示するThediv.スタイル.表示= " " ;". これに落とす html Thediv "Thediv.Innerhtml = "『 a href='#' onclick='return clicker();' ウィンドウを閉じる / a を"". ここに置くと2つの引用マークinbetween何 html に表示されるようにしたい. 単一引用符を使用する必要がありますので、別の引用を[ " ]このタグを終了する予定を覚えてお html [ ' ]またはエスケープ[ " ] [バックスラッシュを使用する]すべての引用符の前にメールで.g. [ " ]. あなたのどこかには再び機能している場合は、ウィンドウを閉じる. 他の賢明な利用者がページの上部にあるウィンドウを取り戻すことができないと動けなくなるだろう. "）他（"を表示された場合には、 div... "Thediv.スタイル.ディスプレイ= "なし" ;"それを非表示 "Thediv.Innerhtml = '' ;"と何もするため、その内容を設定. "}は、他のif文の"終わり. "復帰はfalse ;"の機能のためにはfalseを返す. リンクは基本的にはこのように、実際にはそれをクリックしたときのHREFのリンク先に移動していませんが. 場合は、リンク上でのonclickメソッドを使用します. "}関数の"終了. うまく作る実際にどこかのページが起動して何かをクリックして、ユーザーのためには、 divが非表示にするために必要なページに動作させるために:隠されたdisplaybox部: リンクをクリックして実行されるとJavaScript関数のonclickを返す: 表示例 この場合、この効果を作成する方法を調整することも十分に理解を与えるのヒントが得られます, 変化, とは、独自に行って操作する html レイアウト. 楽しむ! | |||||||||||||
|
フォーラム • チュートリアル • マガジン • サービス • ビデオ • ニュース • ブログ © CreativeCOW.net 全ての権利を確保されています. クリエイティブコミュニティの世界 [頂上] English • العربية • 中文 • Français • Deutsch • עברית • हिन्दी • Italiano • 日本語 • Português • Русский • Español |
