Eugene's Blog
0%

[Electron]vanilla js套件系列-Modal:modal-vanilla

發表於 更新於 分類於 閱讀次數：
4.4k 8 分鐘

前情提要

筆者工作環境中前端使用angular框架撰寫，model binding根本無敵阿，且typescript語言，對於筆者這種後端人員來說，上手速度是頗快的，扯遠了，筆者要強調的是能用angular或其他兩大框架寫前端根本就是一等公民，來到Electron專案，是有神者有做angular-electron或vue-electron的版本，但筆者覺得自己前端實力不夠，怕handle不了，還是乖乖用純js撰寫其專案，根本就變回二等公民，這篇主要介紹其中需要modal功能時，挑選只有vanilla js的modal套件來實作。

內容

引入modal.min.js

筆者這邊使用的是modal-vanilla，引用方式也滿簡單的，只要從該github連結中進到dist資料夾，下在modal.min.js到專案中引入即可

1
<script src="./scripts/modal.min.js"></script>

筆者這邊測試發現，需要引入bootstrap的css才會正常作業

宣告Modal區塊

接著使用官方的範例code吧，宣告一個modal區塊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="static-modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

撰寫Modal開啟按鈕事件

接著寫一段script，也是照著官方教學，但首先要放置一個對應的button

1
2
3
4
5
6
7
8
9
10
11
<!--html-->
<button class="mb-3 mt-3 js-static-modal-toggle-main btn btn-lg btn-primary" type="button">Show Me The Modal</button>

<!--script-->
<script>
  document
    .querySelector(".js-static-modal-toggle-main")
    .addEventListener("click", function () {
      new Modal({ el: document.getElementById("static-modal") }).show();
    });
</script>

完整程式碼

組合上述片段程式碼們

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo Modal</title>
    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
    crossorigin="anonymous"
  />
  </head>
  <body class="container">
    <button class="mb-3 mt-3 js-static-modal-toggle-main btn btn-lg btn-primary" type="button">Show Me The Modal</button>
    <div id="static-modal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>One fine body…</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              Close
            </button>
            <button type="button" class="btn btn-primary" data-dismiss="modal">
              OK
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script src="./scripts/modal.min.js"></script>
    <script>
      document
        .querySelector(".js-static-modal-toggle-main")
        .addEventListener("click", function () {
          new Modal({ el: document.getElementById("static-modal") }).show();
        });
    </script>
  </body>
</html>

實際效果

實際效果如下，畫面上有一顆按鈕，按下後會浮出modal視窗，完美

結論

筆者覺得gihub上的大神們都很強，該套件就是盡量寫成跟bootstrap的modal使用方式很類似，若你習慣使用bootstrap modal，這個應該很容易上手，筆者這邊只做了簡單的示範，還有事件可以攔截擴充，應該就以vanilla js的方式解決，已經非常足夠了。

參考

相關文章