https://www.club-sunstar-pro.jp/assets/common/js/custom.modal.js

1$(function () {
2  if (typeof $.modal === "undefined") {
3    throw new Error(
4      "This module requires jquery.modal.js (https://jquerymodal.com/)."
5    );
6  }
7
8  // ワーニングモーダル／ワーニングモーダル（ログイン）
9  $(".js-module-modal").on("click", function (event) {
10    event.preventDefault();
11
12    if (!$(this).attr("message")) {
13      throw new Error('"message" is required.It should be setted.');
14    }
15
16    var attrs = {
17      modal: $(this).attr("modal") ? $(this).attr("modal") : "wmodal",                            // wmodal, wmodal-login
18      message: $(this).attr("message"),                                                           // 表示メッセージ
19      warnIcon: $(this).attr("warn-icon") ? $(this).attr("warn-icon") === "true" : true,          // ワーニングアイコンを表示（true）／非表示（false）
20      escapeClose: $(this).attr("escape-close") ? $(this).attr("escape-close") === "true" : true, // Escキーによりモーダルを非表示（true）
21      clickClose: $(this).attr("click-close") ? $(this).attr("click-close") === "true" : true,    // クリックによりモーダルを非表示（true）
22      showClose: $(this).attr("show-close") ? $(this).attr("show-close") === "true" : false       // 閉じるボタン（右上）を表示（true）／非表示（false）
23    }
24    modal(attrs);
25  });
26
27  // モーダルを削除する
28  $(document).on($.modal.CLOSE, remove$Modal);
29  function remove$Modal() {
30    $("html").removeClass("fixed");
31    $(".js-modal.modal").remove();
32  }
33});
34
35/**
36 * ワーニングモーダルを表示する
37 * ※メッセージを改行して表示する場合、'\n'を使用する。
38 * ※SP表示時、改行しません。
39 * 　例：'大変申し訳ございませんが、学生の方はお申し込みができません。\nご了承ください。'
40 */
41function showWModal(message) {
42  modal({ modal: "wmodal", message: message , showClose: false});
43}
44/**
45 * ワーニングモーダル（ログイン）を表示する
46 * ※メッセージを改行して表示する場合、'\n'を使用する。
47 * ※SP表示時、改行しません。
48 * 　例：'大変申し訳ございませんが、学生の方はお申し込みができません。\nご了承ください。'
49 */
50function showWModalLogin(message) {
51  modal({ modal: "wmodal-login", message: message, showClose: true});
52}
53
54// モーダルを表示する
55function modal(options) {
56  var defaultOptions = {
57    modal: "wmodal",   // wmodal, wmodal-login
58    urlModal: "",      // wmodal, wmodal-login以外のモーダルを表示する場合、URLを設定する
59    message: "",       // 表示メッセージ
60    warnIcon: true,    // ワーニングアイコンを表示（true）／非表示（false）
61    escapeClose: true, // Escキーによりモーダルを非表示（true）
62    clickClose: true,  // クリックによりモーダルを非表示（true）
63    showClose: false   // 閉じるボタン（右上）を表示（true）／非表示（false）
64  };
65  var show = function(args) {
66    try {
67      $.get(args.urlModal, function (html) {
68        $("html").addClass("fixed");
69        $(html).appendTo("body").modal({
70          blockerClass: "jquery-modal module_modal",
71          closeText: "",
72          escapeClose: args.escapeClose,
73          clickClose: args.clickClose,
74          showClose: args.showClose,
75        });
76
77        switch(args.modal) {
78          // wmodal, wmodal-loginの場合、処理する
79          case "wmodal":
80          case "wmodal-login":
81            if (!args.message) {
82              args.message = "";
83            }
84            args.message = args.message.replace(/\r?\n|\\n/g, "<br>");
85            let dEl = document.createElement("div");
86            dEl.innerHTML = "<p>" + args.message + "</p>";
87            dEl.className = "msg";
88            $(".js-message").replaceWith(dEl);
89      
90            if (args.redir && args.redir !='') {
91              document.getElementById("btn_login").href = "/auth/login/redir/" + args.redir; 
92              document.getElementById("btn_add").href = "/user/add/redir/" + args.redir; 
93            }
94            if (!args.warnIcon){
95              $(".modal .model_contents .warn_icon").addClass("none");
96            }
97            $(".module_modal.blocker").addClass("w-modal");
98            break;
99          case "fee-revision_dowwnload":
100            var wheight = $(window).height();
101            var jsmodal = $('.js-modal.modal');
102            if (!jsmodal) {
103              return;
104            } else {
105              if (wheight < 890) {
106                jsmodal.addClass('mini');
107              }
108              if (wheight < 569) {
109                $('.module_modal .modal.mini').css({"padding": "32px 15px 12px"});
110                $('.modal.mini .model_contents .module_paragraph').css({"line-height": "1.5"});
111              }
112              if (jsmodal[0].clientHeight > wheight) {
113                $(".module_modal.blocker").css("align-items", "flex-start");
114              }
115            }
116            break;
117
118          // wmodal, wmodal-login以外のモーダルを表示する場合、ここで処理を追加する（必要な場合）
119          default:
120            break;
121        }
122      });
123    } catch (ex) {
124      throw new Error(ex.message);
125    }
126  };
127
128  if (!options) {
129    throw new Error('"options" is incorrect.');
130  }
131  $.extend(defaultOptions, options);
132
133  switch(defaultOptions.modal) {
134    case "wmodal":
135      defaultOptions.urlModal = "/assets/common/component/w-modal.html";
136      if (!options.message) {
137        throw new Error('"options.message" is incorrect.');
138      }
139      break;
140    case "wmodal-login":
141      defaultOptions.urlModal = "/assets/common/component/w-modal_login.html";
142      if (!options.message) {
143        throw new Error('"options.message" is incorrect.');
144      }
145      break;
146    case "fee-revision_dowwnload":
147      break;
148
149    // wmodal, wmodal-login以外のモーダルを表示する場合、ここで処理を追加する（必要な場合）
150    default:
151      break;
152  }
153  show(defaultOptions);
154}
155// モーダルを閉じる
156function closeModal() {
157  if ($.modal) {
158    $.modal.close();
159  }
160}