検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JSポップアップウィンドウコード集（詳細アレンジ）_JavaScriptスキル

JSポップアップウィンドウコード集（詳細アレンジ）_JavaScriptスキル

WBOY
WBOYオリジナル
2016-05-16 17:46:031458ブラウズ

ほとんどの人は、Web ページを使用してさまざまな形式のウィンドウをポップアップする方法を知っていると思いますが、さまざまなポップアップ ウィンドウを作成する方法を今日学びましょう:
1 .全画面ウィンドウをポップアップする

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

;
www.jb51.net



2. F11 対応ウィンドウをポップアップします
コードは次のとおりです:
;
www.jb51.net




3. お気に入りリンク ツールバーのあるウィンドウをポップアップします

コードをコピーします コードは次のとおりです。
www.wangye8.com




4. Web ページ ダイアログ ボックス

コードをコピー
コードは次のとおりです。 スクリプト言語="javascript">

wangye8.com


<- -
showModelessDialog('http://www.jb51.net,'Script Home','dialogWidth:400px;dialogHeight:300px;
dialogLeft:200px;dialogTop:150px;center:yes; help:yes;サイズ変更可能:はい;ステータス:はい')
//->
http://www.wangye8.com ;/body>



showModalDialog() または showModelessDialog() は、Web ダイアログ ボックスを呼び出します。 showModalDialog() (略してモーダル ウィンドウ) によって開かれたウィンドウは親ウィンドウ上に配置され、親ウィンドウにアクセスするには閉じる必要があります (問題を避けるために、できるだけ使用しないことをお勧めします); showModelessDialog()
dialogHeight: iHeight はダイアログ ウィンドウの高さを設定します。
dialogWidth: iWidth はダイアログ ウィンドウの幅を設定します。
dialogLeft: iXPos は、デスクトップの左上隅を基準としたダイアログ ウィンドウの左位置を設定します。
dialogTop: iYPos は、デスクトップの左上隅を基準としたダイアログ ウィンドウの上部の位置を設定します。
center: {yes | no | 0} ダイアログ ボックスをデスクトップの中央に配置するかどうかを指定します。デフォルト値は「yes」です。
help: {yes | no | 0 | ダイアログ ウィンドウに状況依存のヘルプ アイコンを表示するかどうかを指定します。デフォルト値は「はい」です。
resizable: {yes | no | 0} ダイアログ ウィンドウのサイズを変更できるかどうかを指定します。デフォルト値は「いいえ」です。
status: {yes | no | 0 | ダイアログ ウィンドウにステータス バーを表示するかどうかを指定します。デフォルト値は、モードレス ダイアログ ウィンドウの場合は「yes」、モーダル ダイアログ ウィンドウの場合は「no」です。


5. その他のポップアップ ウィンドウ コード

頻繁にインターネットをサーフィンする友人は、ホームページに入るとすぐにウィンドウが表示されます。または、リンクまたはボタンがポップアップします。通常、このウィンドウには、メモ、著作権情報、警告、ようこそ、または作成者が特に注意したいその他の情報が表示されます。実際、このようなページの作成は非常に簡単で、ページの HTML にいくつかの JavaScript コードを追加するだけです。以下にその謎を分析していきます。


[最も基本的なポップアップ ウィンドウ コード]

実際、コードは非常に単純です:


コピーcode

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


これは Java スクリプト コードであるため、 の間に配置する必要があります。 一部の古いブラウザでは JavaScript がサポートされていない場合、タグ内のコードはテキストとして表示されません。
Window.open ('page.html') は、新しいウィンドウ page.html のポップアップを制御するために使用されます。page.html がメイン ウィンドウと同じパスにない場合は、そのパスを次のように記述します。フロントでは、絶対パス (http://) と相対パス (../) を使用できます。
一重引用符または二重引用符を使用できますが、混合しないでください。
このコードは HTML 内のどこにでも、または と の間に追加できます。特にページ コードが長くて必要な場合は、前にあるほど早く実行されます。ページを作成する 早く表示される場合は、できるだけ前に配置します。

[設定後のポップアップウィンドウ]
ポップアップウィンドウの外観の設定について説明します。上記のコードにもう少し追加するだけです。
ページの特定の条件に合わせて、このポップアップ ウィンドウの外観、サイズ、ポップアップの位置をカスタマイズしましょう。
コードをコピー コードは次のとおりです:



次に、文 を使用して、page.html の元の文を置き換えます。 (この文を書くことを忘れないでください。この文の機能は、ウィンドウを閉じるコードを呼び出し、10 秒後に自動的にウィンドウを閉じることです。)

[ポップアップウィンドウ閉じるボタン】
コードをコピー コードは次のとおりです。




はは、さらに完璧になりました。
[ポップアップ ウィンドウが含まれています - 1 ページに 2 つのウィンドウ]
上記の例にはすべて 2 つのウィンドウが含まれており、1 つはメイン ウィンドウ、もう 1 つは小さなポップアップ ウィンドウです。
次の例では、上記の効果を 1 ページで完了できます。
コードをコピー コードは次のとおりです。

head>



ほとんどの人は Web ページの使い方を知っていると思います。さまざまな形式のウィンドウをポップアップしますが、それらのさまざまなポップアップ ウィンドウをどのように作成するのでしょうか。今日はそれを学びましょう:
1. 全画面ウィンドウをポップアップします



コードをコピーします コードは次のとおりです:
;
www .jb51.net




2. F11 化されたウィンドウをポップアップします


コードをコピーします コードは次のとおりです:
;
www .jb51.net



3. お気に入りのリンク ツールバーをポップアップ表示します。

コードをコピーします

コードは次のとおりです: www.wangye8.com
< /html>


4. Web ページダイアログボックス
コードをコピーします コードは次のとおりです:


http://www.wangye8. com< /b>



showModalDialog() または showModalDialog() showModelessDialog() 違いは、showModalDialog() によって開かれたウィンドウ (略してモーダル ウィンドウ) が親ウィンドウ上に配置され、親ウィンドウにアクセスするには閉じる必要があることです (問題を避けるために、できるだけ使用しないことをお勧めします)。 ; showModelessDialog()
dialogHeight: iHeight 設定 ダイアログ ウィンドウの高さ。
dialogWidth: iWidth はダイアログ ウィンドウの幅を設定します。
dialogLeft: iXPos は、デスクトップの左上隅を基準としたダイアログ ウィンドウの左位置を設定します。
dialogTop: iYPos は、デスクトップの左上隅を基準としたダイアログ ウィンドウの上部の位置を設定します。
center: {yes | no | 0} ダイアログ ボックスをデスクトップの中央に配置するかどうかを指定します。デフォルト値は「yes」です。
help: {yes | no | 0 | ダイアログ ウィンドウに状況依存のヘルプ アイコンを表示するかどうかを指定します。デフォルト値は「はい」です。
resizable: {yes | no | 0} ダイアログ ウィンドウのサイズを変更できるかどうかを指定します。デフォルト値は「いいえ」です。
status: {yes | no | 0 | ダイアログ ウィンドウにステータス バーを表示するかどうかを指定します。デフォルト値は、モードレス ダイアログ ウィンドウの場合は「yes」、モーダル ダイアログ ウィンドウの場合は「no」です。
5. その他のポップアップ ウィンドウ コード
頻繁にインターネットをサーフィンする友人は、ホームページに入るとすぐにウィンドウがポップアップしたり、リンクやボタンが表示されたりすることがあります。通常、このウィンドウには、著作権情報、警告、ようこそ、または作成者が特に注意したいその他の情報が表示されます。実際、このようなページの作成は非常に簡単で、ページの HTML にいくつかの JavaScript コードを追加するだけです。以下にその謎を分析していきます。


[最も基本的なポップアップ ウィンドウ コード]

実際、コードは非常に単純です:


コピーcode
コードは次のとおりです: 🎜>
パラメータの説明:
js スクリプト End を使用します。 ]

以下は完全なコードです



コードをコピーします

コードは次のとおりです:
次に、文 を使用して、page.html の元の文を置き換えます。 (この文を書くことを忘れないでください。この文の機能は、ウィンドウを閉じるコードを呼び出し、10 秒後に自動的にウィンドウを閉じることです。) [ポップアップウィンドウ閉じるボタン】



コードをコピー


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




はは、さらに完璧になりました。 [ポップアップ ウィンドウが含まれています - 1 ページに 2 つのウィンドウ] 上記の例にはすべて 2 つのウィンドウが含まれており、1 つはメイン ウィンドウ、もう 1 つは小さなポップアップです。窓の次の例では、上記の効果を 1 ページで完了できます。



コードをコピー

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