ダイアログボックスをポップアップさせる9つのjsメソッドまとめ

[1. 最も基本的な JS ポップアップダイアログウィンドウのコード]

これは最も基本的な JS ポップアップダイアログボックスです。実際、コードは非常に単純です。

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

これは JavaScript コードの一部であるため、の間に配置する必要があります。は、一部の古いブラウザでは有効であり、タグ内のコードはテキストとして表示されません。この良い習慣を身につけてください。

window.open ("page.html") は、新しいウィンドウ page.html のポップアップを制御するために使用されます。page.html がメインウィンドウと同じパスにない場合は、そのパスを次のように記述する必要があります。フロントでは、絶対パス (http://) と相対パス (../) を使用できます。一重引用符または二重引用符のいずれかを使用できますが、混合しないでください。
このコードは、HTML のとの間、およびの間のどこにでも追加できます。早いほど早く実行されます。特にページのコードが長い場合、この種の JS ポップアップダイアログボックスをできるだけ早くポップアップさせたい場合は、できるだけ前方に配置する必要があります。

[2. 属性設定用の js ポップアップダイアログコードを追加]

JS ポップアップダイアログウィンドウのプロパティの設定について話しましょう。上記のコードにもう少し追加するだけです。
この JS ポップアップダイアログボックスに表示されるウィンドウの外観、サイズ、ポップアップ位置をページの特定の条件に合わせてカスタマイズしてみましょう。

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

コードを表示

JS スクリプトの終わり

[3. 関数を使用して js ポップアップダイアログウィンドウを制御する]

以下は、完全な js ポップアップダイアログボックスのコードです。

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

コードを表示

被らないようにするには2 つのポップアップウィンドウ。互いに重ならないように、上と左を使用してポップアップの位置を制御します。最後に、上記の 4 つのメソッドを使用して呼び出すことができます。

注: 2 つの JS ポップアップダイアログウィンドウ (newwindows と newwindow2) の名前は同じであってはなりません。または、すべて空である必要があります。

[5. メインウィンドウでファイル 1.htm を開くと、同時に小さなウィンドウ page.html が表示されます]

次のコードがメインウィンドウの先頭領域に追加されます:

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

コードを表示

領域に参加します:

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

open

以上です。

[6. jsポップアップダイアログボックスウィンドウを閉じるタイミング]

次に、js ポップアップダイアログボックスのウィンドウを制御してみましょう。効果がさらに良くなります。ポップアップページに小さなコードを追加した場合 (メインページではなく、page.html の HTML に追加されることに注意してください。そうでない場合は...)、ポップアップページが自動的に閉じた方がクールではないでしょうか。 10秒？

まず、page.html ファイルの領域に次のコードを追加します。

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

を使用します。 body onload ="closeit()"> この文は、page.html の元の文を置き換えることができます。 (この文を書くことを忘れないでください。この文の機能は、ウィンドウを閉じるコードを呼び出し、10 秒後に自動的にウィンドウを閉じることです。)
【7. jsポップアップダイアログウィンドウに閉じるボタンを追加します】

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

 INPUT TYPE= "BUTTON" value="Close" onClick="window.close()"> 
 
はは、これでさらに完璧になりました。

[8. 付属の JS ポップアップダイアログウィンドウ - 1 ページに 2 つのウィンドウ]

上記の例にはすべて 2 つのウィンドウが含まれており、1 つはメインウィンドウ、もう 1 つはポップアップの小さなウィンドウです。

次の例では、上記の効果を 1 ページで完了できます。

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

View Code

Open a window

Look at the code in OpenWindow.document.write(). Isn’t it standard HTML? Just write more lines according to the format. Be sure to note that an error will occur if there is one more label or one less label. Remember to end it with OpenWindow.document.close().

[9. Ultimate application--JS pop-up dialog window cookie control]

Recall that although the above pop-up window is cool, there is a little problem (you must not have noticed it if you are immersed in joy, right?) For example, if you put the above script in a page that needs to be passed frequently (such as the homepage) , then every time the page is refreshed, the window will automatically execute the js pop-up dialog code once. Isn't it very annoying? :-(Is there a solution? Yes! ;-) Follow me.

We use cookies to control it.

First, add the following code to the area of the main page HTML:

Copy code The code is as follows:

View Code

著者別の最新記事