実現したいこと
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のカスタム方法を色々と検索したのですが、「前へ」「次へ」ボタン設置については解決方法が出てきませんでした。
補足
特になし
0 コメント