Warning: Undefined array key 3 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18
Warning: Undefined array key 4 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21
Warning: Undefined array key 3 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30
Warning: Undefined array key 4 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33
JavaScriptの.querySelectorAll() を使って、よくブログの記事の冒頭に設置される「目次」をネイティブなJavaScriptで生成して、それをモーダルの中に表示させてみます。
かかかず
.querySelectorAll() だけではないですが、そんなスニペットです。
jQueryのライブラリ依存もなく、カスタマイズも比較的簡単なので、順に解説していきます。
.querySelectorAll()
JavaScriptの .querySelectorAll() は、CSS のセレクタ形式で条件を指定して要素を取得するメソッドです。
document.querySelectorAll(ここにCSSのセレクタ)classや idといった簡単なものから、タグとclassを組み合わせた複雑なものまで指定することができる、便利なメソッドです。
かかかず
使い勝手の良いメソッドです。
目次が表示されるモーダルのサンプル
早速サンプルです。
以下のボタンをクリックすると、モーダルが現れその中に目次が表示されます。
目次はこのページの h タグを取得していて、各目次・モーダル外・バツのいずれかをクリックすることで、モーダルが閉じます。
かかかず
目次の装飾は全てCSSです。
サンプルのコード
HTMLは、大きく分けて「モーダルを表示させるボタン」と「モーダルの中身」の2つに分かれます。目次は、JavaScriptで出力する <ul id="tocBlock"></ul> のタグをモーダルの中に記述します。
<div class="container">
<button class="modal-toggle btn-example" data-modal="modalOne">目次のモーダル</button>
</div>
<!-- modalInner -->
<div id="modalOne" class="modal">
<div class="modal-content">
<div class="modal-top">
<span class="modal-close">×</span>
</div>
<div class="modal-container">
<ul id="tocBlock"></ul>
</div>
</div>
</div>
<!-- modalInner -->かかかず
ちなみに、buttonタグじゃなく他のタグに class="modal-toggle" data-modal="modalOne" を付けてもモーダルが発火するので、汎用性は高いです。
JavaScriptの全体感で言うと、上から順に「モーダル」「目次」「目次クリック時の動作」の3つに分かれます。
//modal
const modalBtns = document.querySelectorAll(".modal-toggle");
modalBtns.forEach(function (btn) {
btn.onclick = function () {
var modal = btn.getAttribute('data-modal');
document.getElementById(modal).style.display = "block";
};
});
const closeBtns = document.querySelectorAll(".modal-close");
closeBtns.forEach(function (btn) {
btn.onclick = function () {
var modal = btn.closest('.modal');
modal.style.display = "none";
};
});
window.onclick = function (event) {
if (event.target.className === "modal") {
event.target.style.display = "none";
}
};
//toc
document.addEventListener('DOMContentLoaded', function() {
htmlTableOfContents();
} );
function htmlTableOfContents( documentRef ) {
var documentRef = documentRef || document;
var toc = documentRef.getElementById("tocBlock");
var headings = [].slice.call(documentRef.body.querySelectorAll('.entry-content h1, .entry-content h2, .entry-content h3')); /* ここで目次で取得するタグを指定 */
headings.forEach(function (heading, index) {
var ref = "toc" + index;
if ( heading.hasAttribute( "id" ) )
ref = heading.getAttribute( "id" );
else
heading.setAttribute( "id", ref );
var link = documentRef.createElement( "a" );
link.setAttribute( "href", "#"+ ref );
link.classList.add('linkTarget');
link.textContent = heading.textContent;
link.setAttribute( "onclick", "displayno()" );
var div = documentRef.createElement( "li" );
div.setAttribute( "class", heading.tagName.toLowerCase() );
div.appendChild( link );
toc.appendChild( div );
});
}
try {
module.exports = htmlTableOfContents;
} catch (e) {
};
//event
function displayno() {
document.getElementById("modalOne").style.display = "none";
};最後に、モーダル内にある目次をクリックした時にモーダルが非表示になるよう、クリックのイベントハンドラをHTMLに出力させて、その為の関数を記述しています。
CSS
CSSは、使用しているタグが多少多いのでそれに比例して多めです。
/* modal */
.modal {
display: none;
position: fixed;
z-index: 8887;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
transition: all 1s ease-in-out;
}
.modal-content {
background: #FFF;
overflow-y: auto;
padding: 20px 25px;
width: 90%;
max-width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 400px;
animation: show 0.6s linear 0s;
filter: drop-shadow(0px 2px 6px #777);
}
.modal-top {
display: inline-block;
position: absolute;
right: 5px;
top: 5px;
}
.modal-close {
color: #FF0000;
text-decoration: none;
font-size: 2rem;
line-height: 1;
padding: 0 8px;
}
.modal-close:hover, .modal-close:focus {
text-decoration: none;
cursor: pointer;
}
.modal-title {
color: #FFF;
}
@keyframes show{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
/* toc */
ul#tocBlock {
border: none;
margin: 0;
list-style: none;
padding: 0;
counter-reset: li;
}
ul#tocBlock li {
padding: 0 0 0 32px;
font-size: 1.1rem;
margin: 8px 0;
line-height: 1.6;
position: relative;
}
ul#tocBlock li:first-child {
margin-top: 0;
}
ul#tocBlock li:last-child {
margin-bottom: 0;
}
ul#tocBlock li.h2:before {
position: absolute;
top: 50%;
left: 0;
font-weight: bold;
color: #f0db3f;
counter-increment: li;
content: counter(li);
background: #313131;
border-radius: 9999px;
transform: translateY(-50%);
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
line-height: 22px;
font-size: 0.85rem;
}
li.h3:before {
position: relative;
content: '\f105';
display: inline-block;
width: 14px;
height: 28px;
line-height: 26px;
font-size: 20px;
color: #f0db3f;
vertical-align: middle;
margin-right: 7px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
ul#tocBlock li a {
padding: 5px 0;
display: inline-block;
color: #313131;
transition: all .3s ease;
position: relative;
}
ul#tocBlock li a:after {
content: "";
width: 0;
height: 2px;
background: #e6d340;
bottom: 3px;
left: 0;
position: absolute;
transition: all .3s ease;
}
ul#tocBlock li a:hover:after {
width: 100%;
}目次のデザインはこのページにあわせて作っているので、設置する場合はカスタマイズして使ってください。
