質問させていただきます。
ホームページから電話を掛けてもらう際、
「施術中のため、電話に出れない場合があります。お電話を頂いた場合あとからお掛け直ししますので、留守番電話にお名前とご用件、症状などをお入れください。」
と、1度注意を促す吹き出しを表示して、その後で電話を掛けることができるようにしたいと考えています。
これが可能なのか、そして具体的にどのようなHTMLあるいはPHPの記述が必要なのか調べましたが、全くわからない状況です。
ご存知の方、教えていただけたら大変助かります。
よろしくお願いします。
補足情報(言語/FW/ツール等のバージョンなど)
サーバーはエックスドメインの無料サーバー
ワードプレスのバージョンはWordPress 4.9.5
PHPはPHP7.0.7
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
簡単な確認画面でよければ、以下のような感じでいけるかと思います。
html
1<a href="tel:0123-45-6789">0123-45-6789</a>
js
1 $('a[href^="tel"]').click(function(e){ 2 if (confirm('施術中のため、電話に出れない場合があります。お電話を頂いた場合あとからお掛け直ししますので、留守番電話にお名前とご用件、症状などをお入れください。')){ 3 return true; 4 }else{ 5 return false; 6 } 7 });
極端な話、以下のようにHTMLでそのTELリンクのすぐ後ろに書けばOKです。
もちろんjQueryが入っていないと動作はしませんが。
JSは、何を読み込んでいるかわからないので、読み込んでいるJSに追加してください。
html
1<a href="tel:0123-45-6789">0123-45-6789</a> 2<script type="text/javascript"> 3 $('a[href^="tel"]').click(function(e){ 4 if (confirm('施術中のため、電話に出れない場合があります。お電話を頂いた場合あとからお掛け直ししますので、留守番電話にお名前とご用件、症状などをお入れください。')){ 5 return true; 6 }else{ 7 return false; 8 } 9 }); 10</script>
HTMLのみ
強引な話、こんなのでも可能です。
jQueryは使わなくても、素のJSでできますね。
html
1<a href="tel:0123-45-6789" onclick="if(confirm('施術中のため、電話に出れない場合があります。お電話を頂いた場合あとからお掛け直ししますので、留守番電話にお名前とご用件、症状などをお入れください。')){ return true; }else{ return false; }">0123-45-6789</a>
HTMLとJS分離
同ページに複数あっても対応してます。jQueryなしです。
html
1<a class="tel-alert" href="tel:0123-45-6789"">0123-45-6789</a> 2<a class="tel-alert" href="tel:0123-45-0000"">0123-45-0000</a> 3<script type="text/javascript"> 4 var telLinks = document.querySelectorAll('.tel-alert'); 5 telLinks.forEach(function(telLink) { 6 telLink.addEventListener('click', function(e){ 7 e.preventDefault(); 8 if (confirm('施術中のため、電話に出れない場合があります。お電話を頂いた場合あとからお掛け直ししますので、留守番電話にお名前とご用件、症状などをお入れください。')){ 9 location.href = e.target.getAttribute('href'); 10 }else{ 11 return false; 12 } 13 }, false); 14 }); 15</script> 16
投稿2018/05/14 08:08
編集2018/05/16 01:52総合スコア3404
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/14 08:34
2018/05/15 00:46
2018/05/16 00:12
2018/05/16 01:29
2018/05/16 01:53
2018/05/16 03:06
2018/05/16 03:12
2018/05/16 03:29
2018/05/22 23:50 編集
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/14 08:24