スライダーで使用しているbootstrap5のモーダルをjsで表示させたい

Question

前提・実現したいこと

こちら（http://black-flag.net/jquery/20200520-6799.html）のスライダーを使用してbootstrap5のモーダルを表示させたいのですが、スマホだとタップしてもモーダルが開けないのでjsで表示させたいです。

該当のソースコード

if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/Macintosh/) != -1 && 'ontouchend' in document || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
		selfWrap.find('a').on({
				'touchstart': function(e){
						thisHref = $(this).attr('href');
						thisTarget = $(this).attr('target');
						thisId = $(this).attr('id');
						touchFlag = true;
				},
				'touchmove': function(e){
						touchFlag = false;
						e.preventDefault();
				},
				'touchend': function(e){
						if(touchFlag == true){
								if(thisTarget == '_blank'){
										window.open(thisHref, '_blank');
								} else {
										location.href = thisHref;
								}
						}
				}

ここに追記すれば良いと思ったのですが、どのように書けば良いでしょうか。

試したこと

下記のように追記してみたのですが、<div class="modal-backdrop show"></div>しか表示されませんでした。。

				'touchend': function(e){
						if(touchFlag == true){
								if(thisTarget == '_blank'){
										window.open(thisHref, '_blank');
								} else {
										location.href = thisHref;
										$(this).modal('show');
								}
						}

何か良い方法は無いでしょうか。
ご教示の程、宜しくお願いします。

Answer 1

スライダーのリンクを次のように設定している場合

<li><a data-bs-toggle="modal" data-bs-target="#exampleModal"><img src="画像"></a></li>	

下記のように4行追加すれば良いかと思います。

'touchend': function(e){
	if(touchFlag == true){
		if(thisTarget == '_blank'){
			window.open(thisHref, '_blank');
		} else {
			//追加▼
			if(this.hasAttribute('data-bs-target')){
				this.click();
				return;
			}
			//追加▲
			location.href = thisHref;
		}
	}
}