Modaalが動作しない

前提・実現したいこと

jQuery初心者です。

Modaalを使用してModalを表示させようと思っています。
参考URLを元に実装してみたのですがModalが表示されません。
・https://on-ze.com/archives/6971
・https://shu-naka-blog.com/website/modaal-js/

何が原因かわかる方教えて頂けますでしょうか。

発生している問題・エラーメッセージ

modalが表示されないのもそうなのですが、以下のボタンも表示されません。
class="modal"から変更すればボタン自体は表示されるのですが。。（もちろんただ表示されるだけです）

<a href="#modal" class="modal">ぼたん</a>
<div id="modal" style="display:none;">
	<p>これはサンプルです。</p>  ←　表示されない
</div>
<script>
    $('.modal').modaal();
</script>

該当のソースコード

modaal.min.css,modaal.min.jsは以下に置いてあります。
プロジェクト名/main/static/main/css/modaal.min.css
/js/modaal.min.js

HTML
1<head>
2    <!-- Required meta tags always come first -->
3    <meta charset="utf-8">
4    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5    <meta http-equiv="x-ua-compatible" content="ie=edge">
6    <title>{% block title %}{% endblock %}</title>    
7    <!-- Bootstrap CSS -->
8    <link rel="stylesheet"
9    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
10        crossorigin="anonymous">  
11    {% load bootstrap4 %}
12    {% bootstrap_css %}
13    {% bootstrap_javascript jquery='full' %}
14    {{ filter.form.media }}
15    
16 (上の記述はModaalとは関係ないですが悪影響があるかもしれないので表記します)
17
18    <!--Modaal設定-->
19    <!--css-->
20    <link rel="stylesheet" href="css/modaal.min.css">
21    <!--js-->
22    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
23    <script src="js/modaal.min.js" type="text/javascript"></script>
24
25</head>
26
27<body class="container">
28    <div class="content">{% block content %} 
29        {% endblock content %}
30    </div>
31</body>
32
33
34{% block content %}
35
36<!--シンプルモーダル-->
37<a href="#modal" class="modal">ボタン</a>
38<div id="modal" style="display:none;">
39	<p>これはサンプルです。</p>
40</div>
41<script>
42    $('.modal').modaal();
43</script>
44
45{% endblock %}

補足情報

最終的にはボタンではなく、入力フォームをダブルクリックするときにモーダルを表示したいと思っています。
その場合記述は以下でよいでしょうか？
（modal表示ではなくalert表示では動いています。）

HTML
1<script>
2$(function(){
3  $("form input[name='orderNumber']").dblclick(function(){
4    $('.modal').modaal();
5    
6  });
7});
8</script>

Lhankor_Mhy

2021/12/20 06:13

Django かなにかを使ってますか？

akane_emo

2021/12/20 06:26

はい。 Djangoを使用しています。

行動規範の内容に同意します

回答1件

.modal は Modaal のCSSで使用しているので、別のクラス名にした方が無難です。

html
1    <a href="#modal" class="modal_">ボタン</a>
2    <div id="modal" style="display:none;">
3      <p>これはサンプルです。</p>
4    </div>
5    <script>
6      $('.modal_').modaal();
7    </script>