modal内のリンククリックで親画面をページ内遷移させたい

Bootstrapのmodalを使用しています。

申し込みフォームに各コンテンツの一覧を用意して、詳細ボタンをクリックするとmodalが開くようにしています。
modal内にはコンテンツの詳細が記載されており、日付と日時のデータ(データ登録のため、あえて2つに分けています)を持つようにしています。

以下modal内のhtmlです。

html
1<div class="modal fade" id="aaaDtl01" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
2  <div class="modal-dialog">
3    <div class="modal-content">
4      <div class="modal-body">
5        <div class="container-fluid px22 py14">
6          <div class="row mAaaDtl">
7            <div class="col-12 col-lg-2 bg-blue mAaaDate pt10 sp-p2">2020/6/24(木)</div>
8            <div class="col-12 col-lg-2 bg-lg-blue mAaaTime pt10 sp-p2">13:00-17:00</div>
9            <div class="col-12 col-lg-8 pl6 py6 sp-p2">
10              <h3 class="mb2">サンプルタイトル</h3>
11              <p class="people">山田太郎</p>
12            </div>
13          </div>
14          <div class="row mt15">
15            <div class="col-12 col-lg-8 pr13 sp-p2">
16              <p class="line-h18">これはさんぷるです</p>
17            </div>
18            <div class="col-12 col-lg-4 sp-p2">
19              <figure><img class="w-100" src="../static/assets/img/img_aaa.png" alt="サンプル画像"></figure>
20            </div>
21          </div>
22          <div class="mt12">
23            <a class="btn-gradationBlue" href="#mSeminar-contact" data-hiddenday="2020/6/24" data-reservationdate="6/24(木) 13:00-17:00" data-dismiss="modal">選択する</a>
24          </div>
25        </div>
26      </div>
27    </div>
28  </div>
29</div>
30

aタグをクリックしたタイミングで、子画面が閉じ、親画面ではページ内遷移で入力フォームに移動するようにしたいです。
ちなみにaタグをクリックしたタイミングで入力フォームには日時データが表示されるようになっています。
単純なページ内遷移では、親画面を操作することができなかったため、質問させていただきました。

どうぞよろしくお願いいたします。

hoshi-takanori

2020/04/06 21:30

これでしょうか？ https://agohack.com/how-to-use-bootstrap-modal/#toc_id_6

spbob

2020/04/08 06:25

ありがとうございます！ただちょっと違うような、、、すいません説明がわかりにくいですよね汗こちら自己解決できました(気がする)ので、載せます。

行動規範の内容に同意します

回答2件

自己解決

jqueryで解決しました(ただちょっと不安定。。。)

jquery
1  $('a[href="#mSeminar-contact"]').on('click', function(e){
2    seminarProcessing(e);
3    var speed = 100;
4    var href= $(this).attr("href");
5    var target = $(href == "#" || href == "" ? 'html' : href);
6    var position = target.offset().top;
7    $('body,html').animate({scrollTop:position}, speed, 'swing');
8    return;
9  });

投稿2020/04/08 06:29

spbob

総合スコア9

既に自己解決されたようなので、一応別案で載せておきます。

data-dismiss="modal"を消す

html
1<a class="btn-gradationBlue" href="#mSeminar-contact" data-hiddenday="2020/6/24" data-reservationdate="6/24(木) 13:00-17:00">選択する</a>

モーダルを開く処理とモーダルを閉じる処理をjavascriptで行う

javascript
1$('.open-aaaDtl01').on('click', function(e) {
2	$('#aaaDtl01').modal('show');
3});
4$('#aaaDtl01 a.btn-gradationBlue').on('click', function(e) {
5	$('#aaaDtl01').modal('hide');
6});
7

data-toggle="modal"で開く。またはdata-dismiss="modal"で閉じる。
どうも上記のどちらかで実装した場合に、
モダール処理のイベント最後に時間差でスクロールがtopに行ってしまうような動きをしてます。
この辺はBootstrapのコードをみないとどうしてそうなるかはわからないので、
自分的には理由がわからない答えということで、あえて回答しませんでした。

投稿2020/04/08 07:55