具体的な記述
JavaScriptで何を書くかというと、要は次の3つの処理です。
(1) 確認ダイアログを表示して、
(2) キャンセルがクリックされたら、
(3) リンク先への移動を抑止する。
確認ダイアログを表示して、ユーザが「OK」ボタンをクリックしたときに何か処理をするには、次のように記述するのでしたね。
if( confirm('リンク先は...') )
ここでは、「OK」ボタンではなく「キャンセル」ボタンがクリックされたときに処理したいので、次のように記述します。
if( !confirm('リンク先は...') )
confirm の前に「！」を付けました。これは「否定」を意味します。
これによって、「キャンセルがクリックされたときに（条件文が）真」になるようになります。つまり、「キャンセル」ボタンがクリックされたときに、続く処理が実行されるようになるわけです。
「続く処理」とは、「リンク先への移動を抑止する」処理で、それは return false; と書けば良いのでしたね。
それを加えると次のようになります。
if( !confirm('リンク先は...') ) { return false; }
この処理を、「リンクがクリックされたとき」に行いたいわけですから、a要素の onClick属性に記述します。
次のようになります。
<a href="xxx.pdf" onClick="if( !confirm('リンク先はPDFです。移動しますか？') ) { return false; }"> リンク先 </a>
※「xxx.pdf」は、リンク先ファイル名です。
これを表示すると、次のようになります。
確認ダイアログが出て、選択内容に応じて移動したりしなかったりすることが、ご確認頂けたと思います。
おわりに
今回は、リンク先へ移動する前に確認ダイアログを表示させる方法をご紹介致しました。 PDFファイルやDOCファイルなどへのリンクでぜひご活用下さい。
【関連記事】
