モーダルウィンドウが表示されません。

layerBoardを使用し、サイトアクセス時にモーダルウィンドウを表示させたいのですが、表示されません。

CSSでdisplay:none;と記述されているのですが、display:block;にすると表示されます。

ただ、closeボタンを押しても消えません。

ちなみに、下記のブログを参考に作成しました。
http://onesway.hatenablog.com/entry/layerBoard

ローデイングアニメーションが入れてあるのですが、それが悪さしている可能性はありますか？

html
1<main>
2    <div id="loader-bg">
3      <div id="loader">
4        <span>L</span>
5        <span>O</span>
6        <span>A</span>
7        <span>D</span>
8        <span>I</span>
9        <span>N</span>
10        <span>G</span>
11        <span>.</span>
12        <span>.</span>
13        <span>.</span>
14      </div>
15    </div>
16    
17    <div id="container">
18      <div class="wrapper">
19          <!-- layer_board -->
20          <div id="layer_board_area">
21            <div class="layer_board_bg"></div>
22            <div class="layer_board">
23              <h2>---コメント---</h2>
24              <p><a href="https://" target="_blank"><img
25                    src="img/jpg" /></a></p>
26              <p class="btn_close"><a href="#"><img src="img/bnt_close.png" alt="close" width="63" height="12" /></a></p>
27            </div>
28          </div>
29          <!-- //layer_board -->

CSS
1html,body {
2	height: 100%;
3}
4* html .layer_board_bg,
5* html .layer_board {
6	position: absolute;
7}
8
9.layer_board_bg {
10	position: fixed;
11	width: 100%;
12	height: 100%;
13	z-index: 1000;
14	top: 0;
15	left: 0;
16	display: block; 
17	cursor: pointer;
18	background: #444;
19}
20
21.layer_board {
22  display: block; 
23	position: fixed;
24	left: 50%;
25	margin: 50px 0px 0px -285px;
26	text-align: center;
27	z-index: 2000;
28}
29.layer_board h2 {
30	color: #fff;
31}
32.btn_close img {
33	width: 63px;
34	height: 12px;
35}

css
1/* ローデイングアニメーション */
2#loader-bg {
3  display: none;
4  position: fixed;
5  width: 100%;
6  height: 100%;
7  top: 0px;
8  left: 0px;
9  background: #111;
10  z-index: 1;
11}
12#loader {
13  display: none;
14  position: absolute; 
15  top: 50%;
16  left: 25%;
17  width: 30vw;
18  height: 10vh;
19  margin-top: -100px;
20  margin-left: -100px;
21  text-align: center;
22  color: #fff;
23  z-index: 2;
24}
25#loader span {
26  display: inline-block;
27  margin: 0 -.075em;
28  animation: loading .7s infinite alternate;
29  font-size: 2vw;
30  font-weight: bold;
31}
32#loader span:nth-child(2) {
33  animation-delay: .1s;
34}
35#loader span:nth-child(3) {
36  animation-delay: .2s;
37}
38#loader span:nth-child(4) {
39  animation-delay: .3s;
40}
41#loader span:nth-child(5) {
42  animation-delay: .4s;
43}
44#loader span:nth-child(6) {
45  animation-delay: .5s;
46}
47#loader span:nth-child(7) {
48  animation-delay: .6s;
49}
50@keyframes loading {
51  0% {
52    transform: scale(1);
53  }
54  100% {
55    transform: scale(0.8);
56  }
57}

javascript
1$('#layer_board_area').layerBoard({
2  delayTime: 100, // 表示までの待ち時間(初期値：200)
3  fadeTime : 500, // 表示のフェード時間(初期値：500)
4  alpha : 0.8, // レイヤーの透明度(初期値：0.5)
5  limitMin : 1, // 何分経過後に再度表示するか(初期値：1)
6  easing: 'swing', // イージング(初期値：linear)
7  limitCookie : 10 // cookie保存期間(初期値：1日)
8});

m.ts10806

2020/10/27 19:56

>layerBoard 何かのプラグインであれば公式URLを提示してください

masa_air511211

2020/10/28 12:28

http://blog.idea-clippin.com/?p=129 公式URLは、確認出来ませんでしたが、上記のブログにダウンロードできるZIPファイルが貼ってあるので、そこから入手しました。宜しくお願い致します。

m.ts10806

2020/10/28 12:52

一応、明記されてますね。おそらくその記事の方が作者です。 http://blog.idea-clippin.com/sample/layerboard/js/jquery.layerBoard.js ただ、記事も古くメンテナンスされてないので、これそのまま使って大丈夫かという点は気にしたほうが良さそうです。あと、提示のHTML　半端な状態なので、なるべく全体提示してください。コピペで確認する際に弊害となり得ます。（こちらで勝手に埋めたのでは「再現確認」となりません）

masa_air511211

2020/10/28 13:36

同じlayerboardで他のブログで試したらうまく行きました。 https://utamininote.folder.jp/?p=4178 どこが悪かったのかは不明ですが・・・ありがとうございました。