Modaalがうまく動きません
Q&A
Closed
解決したいこと
自作サイトを制作しているのですが、その際にモーダルウインドウを実装する目的でModaalを利用したところ、
jQuery.Deferred exceptionが発生してしまいモーダルの設定が反映されませんでした。
発生している問題・エラー
実装したモーダルウインドウを開く要素をクリックすると、モーダル自体は表示されるのですが
コンソールに以下のように表示されます。
jQuery.Deferred exception: $(...).modaal is not a function TypeError: $(...).modaal is not a function
at HTMLDocument.<anonymous> (<anonymous>:2:17)
at e (https://code.jquery.com/jquery-3.5.1.min.js:2:30005)
at t (https://code.jquery.com/jquery-3.5.1.min.js:2:30307) undefined
また、modaal()という関数を認識していないせいか、この関数の引数内で行っているモーダルの設定も全く反映されていません。
該当するソースコード
ディレクトリ構成
root/
├content/
├css/
│ ├modaal.css
│ └hoge.css
├img/
├js/
│ ├modaal.js
│ └script.js
└index.htmlとかindex.phpとか
index.html
<!DOCTYPE html>
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<link rel="stylesheet" href="css/hoge.css" />
<link rel="stylesheet" href="css/modaal.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/modaal.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="bg">
<div class="main-container">
<div class="top-content">
<!-- 省略 -->
<div class="link-icon">
<!-- モーダル機能部分 -->
<a href="#menu-modal" class="modal"><img id="list-icon" src="img/list.png" alt="list"></a>
<div id="menu-modal" style="display: none;">
<p>Menu Modal</p>
</div>
</div>
</div>
<!-- 省略 -->
</div>
</div>
</body>
</html>
script.js
$(function () {
$('.modal').modaal({
type: 'ajax',
width: '360',
height: '600',
animation_speed: '200',
background: '#000',
overlay_opacity: '0.5',
overlay_close: 'true',
fullscreen: 'false',
background_scroll: 'true',
loading_content: 'Now Loading, Please Wait.'
});
});
開発環境はVSCode、デバッグ使用ブラウザはChromeで、CORSによるエラー回避のためlaunch.jsonでは
"runtimeArgs": ["--disable-web-security"] を設定して実行しております。
まだjavascriptに触れて間もないため、これを解決する方法にたどり着くことが出来ませんでした。
エラー文を検索しても、modaal()ではなくmodal()に関しての情報しか出てこないため手詰まりとなりました。
原因等わかる方がいらしたらご協力お願いします。
0