aタグをクリックして、電話発信とモーダル画面表示を同時に行いたい

Question

実現したいこと

スマホサイトをコーディングしております。
特定のaタグをクリックすることで、下記の内容を同時に処理させたいのですが、うまくいかず…。(iPhone、Androidいずれも)
①電話の発信
②モーダル画面の表示

発生している問題

モーダル画面が表示されるだけで、電話の発信ができませんでした。

該当のソースコード

<a class="js-modal--telButton" href="tel:[phone]">このaタグクリックで電話の発信＆モーダル画面表示を同時に行いたいです</a>

<div class="js-modal--tel">
モーダル画面です
</div>

$('.js-modal--telButton').on('click',function(){
if($('.js-modal--tel').css('display') == 'none'){
$('.js-modal--tel').fadeIn();
} else {
$('.js-modal--tel').fadeOut();
}
return false;
});

試したこと

・aタグに親divを付けてそこにclass="js-modal--telButton"を入れる
・aタグの配下にdivを入れ、そこにclass="js-modal--telButton"を入れる

Comments

[kyoya0819]

ターゲットとする端末はなんですか？

[kyoengrey]

説明足りずすみません！スマホでございます。

[kyoya0819]

iPhone ? Android ? WindowsPhone ? UbuntuTouch ?

[kyoengrey]

iPhone、Android でございます。

Answer 1

無理です。
そもそも、OS側の実装上、モーダルウィンドウと電話発信の両方を同時に行うことができないので実装する意味がありません。
加えてそのような実装をするには、JavaScriptが必要ですが、セキュリテイ上の問題からできないので不可能です。

結論

不可能だし、無意味

Comments

[kyoya0819]

https://teratail.com/questions/86594

参考

[kyoengrey]

ご回答ありがとうございました！不可能なんですね…承知いたしました。