質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1011閲覧

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

masa_air511211

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/10/27 13:35

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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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 半端な状態なので、なるべく全体提示してください。コピペで確認する際に弊害となり得ます。(こちらで勝手に埋めたのでは「再現確認」となりません)
guest

回答1

0

自己解決

同じlayerBoardですが、下記のblogを参考に調整したらうまく行きました。
https://utamininote.folder.jp/?p=4178

投稿2020/10/28 13:38

masa_air511211

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問