bootstrap4を前提に話しますが、3でも同じだと思います。
ダメな例
Aタグを使うとスマホだと無理みたいですね。
<!-- 切り替えボタンの設定 --> <a class="btn btn-primary" data-toggle="modal" data-target="#myModal"> ココを押すと表示...のはずだがこれだと出ない。 </a> <!-- モーダルの設定 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5> <button type="button" class="close" data-dismiss="modal" aria-label="閉じる"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>モーダルのコンテンツ文。</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> <button type="button" class="btn btn-primary">変更を保存</button> </div><!-- /.modal-footer --> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
対処
buttonタグを使いましょう。
<!-- 切り替えボタンの設定 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> ココを押すと表示 </button> <!-- モーダルの設定 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5> <button type="button" class="close" data-dismiss="modal" aria-label="閉じる"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>モーダルのコンテンツ文。</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> <button type="button" class="btn btn-primary">変更を保存</button> </div><!-- /.modal-footer --> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
上記コードは公式より引用
モーダル~Bootstrap4移行ガイド