Q&A
100個を一度に出さないといけないのですか？
実現したいこと
100個程度のモーダル実装をしたいです。
前提
使用ライブラリ
animatedModal.js
https://joaopereirawd.github.io/animatedModal.js/
発生している問題・エラーメッセージ
数が少ないと問題ないのですが、30個程度ですでに下記のようなエラーがiphoneで表示されます。（PCは問題ない）
「このページを開けません」（iphone実機）
該当のソースコード
$("#btn-cat01-01").animatedModal(); $("#btn-cat01-02").animatedModal(); $("#btn-cat01-03").animatedModal(); ・・・
各ボタンごとに実行しています。
試したこと
$("#btn-cat01-01, #btn-cat01-02, #btn-cat01-03, #btn-cat01-04, #btn-cat01-05").animatedModal();
DOMの操作回数を減らせないかと思い上記のようにまとめてみましたが、
どのボタンを押しても同じモーダル（btn-cat01-01）が起動してしまいます。
基本的な内容かもしれませんが、ご教示いただけると助かります。
クラッシュするかどうかは環境によりそうな気がするのですが、複数のデバイスでテストされていますか？
maisumakunさん
一度でなくても大丈夫です。
もっと見るボタンや無限スクロールとかでしょうか。
Lhankor_Mhyさん
はい、手元にiphoneとipadの2台しかないのですがどちらもダメでした。
モーダルを横からスライドさせる仕様で実装したいということで「animatedModal.js」を利用していましたが外部ファイルの読み込みに対応しておらず、すべて同じhtmlに記載していることも要因のひとつだったりするんでしょうか...
> 手元にiphoneとipadの2台しかないのですがどちらもダメでした
そうなんですね。当方でコードを書いてみたところ、要素数33ですが、特に問題はなさそうでした(iPhone12mini iOS17.2.1)。もう少し要素を増やす必要があるんですかね……？
97個でも特に問題なさそうでしたね。
ありがとうございます！！！
私の端末が原因ということも考えられますね...
（それであれば嬉しいんですが）
他にも確認できる人いないかもあたってみます！
一応、当方でテストしたコードを置いておきますね。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
</head>
<body>
<!--Call your modal-->
<a id="demo01" href="#animatedModal01" class="demo">DEMO01</a>
...
<a id="demo97" href="#animatedModal97" class="demo">DEMO97</a>
<div id="animatedModal01">
<div class="close-animatedModal01">x</div>
<div class="modal-content">content01</div>
</div>
...
<div id="animatedModal97">
<div class="close-animatedModal97">x</div>
<div class="modal-content">content97</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://joaopereirawd.github.io/animatedModal.js/js/animatedModal.js"></script>
<script>
$(".demo").each((i, el) => $(el).animatedModal());
</script>
</body>
</html>
回答2件
0
ベストアンサー
モーダルは他のwindowから処理を奪う処理なので重ねがけで複数を実装するのはあまり良い方法とはいえません。とはいえjsの標準モーダルであるdialogを利用すれば、100個くらいなら実装に問題はなさそうですがモバイル系だとちょっと微妙ですね
javascript
1window.addEventListener('DOMContentLoaded', ()=>{ 2 const grid=10; 3 Array(grid**2).fill(null).forEach((_,x)=>{ 4 const offsetX=(parseInt(x/grid)-(grid-1)/2)*60; 5 const offsetY=(x%grid-(grid-1)/2)*60; 6 const dlg=Object.assign(document.createElement('dialog'),{textContent:x+1,style:`width:20px;height:20px;transform:translate(${offsetY}px,${offsetX}px)`}); 7 document.body.appendChild(dlg); 8 dlg.showModal(); 9 dlg.addEventListener('click',()=>dlg.close()); 10 }); 11});
投稿2024/01/17 03:55
編集2024/01/17 03:57
総合スコア116443
ありがとうございます！
そうなんです。100程度ならと思っており
PCで問題なかったので油断していました。
また、モーダルを横からスライドさせて表示したいということで「animatedModal.js」というライブラリを使用しています。
外部htmlを読み込む機能がなくすべて同じhtmlに記載している状況です。
できれば、現状のライブラリのままで対応策が見つかればと考えています。
正直ライブラリがメモリ負荷が高かすぎたりリークが発生していたりする可能性があるので、テスト段階で実働に耐えないという判断であればそのライブラリは早めに諦めるのが賢明です
https://codepen.io/yambejp/pen/xxBqrRv
上記dialogを用いたサンプルcodepenにあげておきます
私のandroid携帯では普通にうごきます
なお回答からの繰り返しになりますが、モーダルの重ねがけはUIとしては賢明ではないと思います
運用を見直したほうがよいでしょう
ありがとうございます！
ご助言いただいてる内容、ごもっともだと思います。
実は分割となっており初回公開では問題なく、100を目指して増やしていく方向になってしまいました。
0
一度でなくても大丈夫です。もっと見るボタンや無限スクロールとかでしょうか。
モーダル自体は1つにしておいて、中身を動的に切り替える、という手法では対応できませんでしょうか？
まず、なぜ100個が必要になったのか、どのような動作をさせる想定の画面なのかが気になります。
投稿2024/01/18 02:05
総合スコア145930
可能であればそのような対応がしたいと思います！
中身を動的に切り替える処理、探したいと思います。
100個にしたい理由はQ＆Aコンテンツでより多くの質問を
スクロールで閲覧できるようにしたいという要望からきたようです。
modalのような排他的なウィンドウ制御が必要かどうかという課題ですね
たんに複数のウィンドウ(?)を開きたいだけならiframeやsvgなど名前空間の違う
要素でやる方がいいかもしれません
modalを100枚というのはレイヤーを干渉する100枚重ねるということですから総じて負荷はたかい
あなたの回答
tips
プレビュー
