実現したいこと
modaal.jsのモーダル画面に「前へ」「次へ」ボタンを設置したい。
困っていること
modaal.jsというライブラリを使って複数設置のモーダル画面を作成してます。
modaal.js
内容は企業サイトの社員メンバーのページを作成しております。
モーダル画面は横幅100%になります。
立ち上がったモーダル画面に、「次へ」「前へ」ボタンを設置して、次のモーダル、前のモーダルに遷移させたいのですが、調べたのですがどうしてもやり方がわかりません。
あと、一番目のモーダルには「前へ」ボタンは表示させないで「次へ」ボタンのみ。
最後のモーダルには「前へ」ボタンは表示させて「次へ」ボタンは非表示にしたいです。
どなたかご教授のほど何卒宜しくお願い致します。
発生している問題・分からないこと
modaal.jsに「前へ」「次へ」ボタンを設置したいのですが、実現方法がわかりません。ネットで調べたのですが、そのような情報が見つからなくてご相談いたしました。
該当のソースコード
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7
8<link href="
9https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/css/modaal.min.css
10" rel="stylesheet">
11
12
13<style>
14 ul {
15 list-style-type: none;
16 display: flex;
17 li {
18 margin-right: 20px;
19 }
20 }
21</style>
22</head>
23<body>
24
25 <div id="inline01" style="display:none;" class="white-popup-block">
26 <h1>Modaal01</h1>
27 <p>Modaal01インラインテキストテスト</p>
28 </div>
29
30 <div id="inline02" style="display:none;" class="white-popup-block">
31 <h1>Modaal02</h1>
32 <p>Modaal02インラインテキストテスト</p>
33 </div>
34
35 <div id="inline03" style="display:none;" class="white-popup-block">
36 <h1>Modaal03</h1>
37 <p>Modaal03インラインテキストテスト</p>
38 </div>
39
40 <div class="staff_list_wrap">
41 <ul class="slides-wrapper staff_list">
42 <li class="staff_slide">
43 <a href="#inline01" class="staff_link btn inline" data-group="people">
44 <button>modaalその１</button>
45 </a>
46 </li>
47
48 <li class="staff_slide">
49 <a href="#inline02" class="staff_link btn inline" data-group="people">
50 <button>modaalその１</button>
51 </a>
52 </li>
53
54 <li class="staff_slide">
55 <a href="#inline03" class="staff_link btn inline" data-group="people">
56 <button>modaalその１</button>
57 </a>
58 </li>
59 </ul>
60 </div>
61
62 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
63
64 <script src="
65 https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js
66 "></script>
67
68 <script type="text/javascript">
69$(document).ready(function() {
70 $('.inline').modaal({
71 fullscreen: true,
72 type: 'inline',
73 group: 'members',
74 after_open: function(modal) {
75 const currentIndex = modal.index;
76 const totalModals = modal.group.length;
77 $('.modaal-prev, .modaal-next').remove();
78
79 if (currentIndex > 0) {
80 $('<button class="modaal-prev">前へ戻る</button>').appendTo('.modaal-content-container').click(function() {
81 $.modaal('close');
82 setTimeout(function() {
83 $(modal.group[currentIndex - 1]).click();
84 }, 200);
85 });
86 }
87
88 if (currentIndex < totalModals - 1) {
89 $('<button class="modaal-next">次を見る</button>').appendTo('.modaal-content-container').click(function() {
90 $.modaal('close');
91 setTimeout(function() {
92 $(modal.group[currentIndex + 1]).click();
93 }, 200);
94 });
95 }
96 }
97 });
98 });
99
100//
101
102 </script>
103
104</body>
105</html>
試したこと・調べたこと
上記の詳細・結果
modaal.jsのカスタム方法を色々と検索したのですが、「前へ」「次へ」ボタン設置については解決方法が出てきませんでした。
補足
特になし
Q&A
ベストアンサー
