LDS Scripture Auto-Link Script in modal iframe

Hello everyone, if you're a blogger and have a lot of scripture references on your blog and have had a hard time pasting links and coding. So here's one that will do the job for you, and it will open in a modal iframe. Note: I don't know whether the church will allow an iframe directly to the official site, but this works fine for now. It will be changed soon if there is, as I have said in my note. Anyway, copy and paste the code below into your Blogger template or HTML page.

For the Close button, if you think the color theme won't match your blog theme, just go to this line -
"#scriptureClose{" and find this code under it: "background:#ff4081;" Just change the #ff4081 to whatever color of your theme. You can also check https://cssgradient.io if you don't know which color best fits your theme. Please remember to add a semicolon ";" right after you add the color so everything else will work perfectly.

Check out the sample Scripture below to -

📜 LDS Scripture Auto-Link Script

Click the button below to copy the entire code, and paste it into your blog theme, or when you edit your layout, you can add HTML/JavaScript for this one.

<!-- ============================== -->
<!-- CSS SECTION (Edit Styles Here) -->
<!-- ============================== -->

<style>
/* -- Scripture Modal --  */
#scriptureModal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    z-index:9999999;
}

#scriptureModal.show{
    display:flex;
}

#scriptureModalBox{
    position:relative;
    width:90%;
    height:90%;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 25px 80px rgba(0,0,0,.35);
}

#scriptureFrame{
    width:100%;
    height:100%;
    border:0;
}

#scriptureClose{
    position:absolute;
    top:15px;
    right:15px;
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:28px;
    color:#fff;
    background:#ff4081;
    z-index:10;
}

#scriptureClose:hover{
    transform:rotate(180deg);
}


.lds-scripture-link{
    color:#0055a5;
    text-decoration:underline;
    cursor:pointer;
    position:relative;
}

.lds-scripture-link:hover{
    color:#000000;
    font-weight:bold;
}

.lds-scripture-link::after{
    content:"Click to read on Gospel Library";
    position:absolute;
    bottom:120%;
    left:50%;
    transform:translateX(-50%);
    background:#333;
    color:#fff;
    padding:6px 10px;
    border-radius:5px;
    white-space:nowrap;
    font-size:12px;
    opacity:0;
    visibility:hidden;
    transition:.2s;
    pointer-events:none;
}

.lds-scripture-link:hover::after{
    opacity:1;
    visibility:visible;
}
</style>



<script>

document.addEventListener("DOMContentLoaded", function(){
const books = {

"Genesis":["ot","gen"],
"Exodus":["ot","ex"],
"Leviticus":["ot","lev"],
"Numbers":["ot","num"],
"Deuteronomy":["ot","deut"],
"Joshua":["ot","josh"],
"Judges":["ot","judg"],
"Ruth":["ot","ruth"],
"1 Samuel":["ot","1-sam"],
"2 Samuel":["ot","2-sam"],
"1 Kings":["ot","1-kgs"],
"2 Kings":["ot","2-kgs"],
"1 Chronicles":["ot","1-chr"],
"2 Chronicles":["ot","2-chr"],
"Ezra":["ot","ezra"],
"Nehemiah":["ot","neh"],
"Esther":["ot","esth"],
"Job":["ot","job"],
"Psalms":["ot","ps"],
"Proverbs":["ot","prov"],
"Ecclesiastes":["ot","eccl"],
"Song of Solomon":["ot","song"],
"Isaiah":["ot","isa"],
"Jeremiah":["ot","jer"],
"Lamentations":["ot","lam"],
"Ezekiel":["ot","ezek"],
"Daniel":["ot","dan"],
"Hosea":["ot","hosea"],
"Joel":["ot","joel"],
"Amos":["ot","amos"],
"Obadiah":["ot","obad"],
"Jonah":["ot","jonah"],
"Micah":["ot","micah"],
"Nahum":["ot","nahum"],
"Habakkuk":["ot","hab"],
"Zephaniah":["ot","zeph"],
"Haggai":["ot","hag"],
"Zechariah":["ot","zech"],
"Malachi":["ot","mal"],

"Matthew":["nt","matt"],
"Mark":["nt","mark"],
"Luke":["nt","luke"],
"John":["nt","john"],
"Acts":["nt","acts"],
"Romans":["nt","rom"],
"1 Corinthians":["nt","1-cor"],
"2 Corinthians":["nt","2-cor"],
"Galatians":["nt","gal"],
"Ephesians":["nt","eph"],
"Philippians":["nt","philip"],
"Colossians":["nt","col"],
"1 Thessalonians":["nt","1-thes"],
"2 Thessalonians":["nt","2-thes"],
"1 Timothy":["nt","1-tim"],
"2 Timothy":["nt","2-tim"],
"Titus":["nt","titus"],
"Philemon":["nt","philem"],
"Hebrews":["nt","heb"],
"James":["nt","james"],
"1 Peter":["nt","1-pet"],
"2 Peter":["nt","2-pet"],
"1 John":["nt","1-jn"],
"2 John":["nt","2-jn"],
"3 John":["nt","3-jn"],
"Jude":["nt","jude"],
"Revelation":["nt","rev"],

"1 Nephi":["bofm","1-ne"],
"2 Nephi":["bofm","2-ne"],
"Jacob":["bofm","jacob"],
"Enos":["bofm","enos"],
"Jarom":["bofm","jarom"],
"Omni":["bofm","omni"],
"Words of Mormon":["bofm","w-of-m"],
"Mosiah":["bofm","mosiah"],
"Alma":["bofm","alma"],
"Helaman":["bofm","hel"],
"3 Nephi":["bofm","3-ne"],
"4 Nephi":["bofm","4-ne"],
"Mormon":["bofm","morm"],
"Ether":["bofm","ether"],
"Moroni":["bofm","moro"],

"D&C":["dc-testament","dc"],
"Doctrine and Covenants":["dc-testament","dc"],

"Moses":["pgp","moses"],
"Abraham":["pgp","abr"],
"Joseph Smith-Matthew":["pgp","js-m"],
"Joseph Smith-History":["pgp","js-h"],
"Articles of Faith":["pgp","a-of-f"]

};

const regex = new RegExp(
"\\b("+
Object.keys(books)
.sort((a,b)=>b.length-a.length)
.map(x=>x.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"))
.join("|")
+")\\s+(\\d+):(\\d+(?:-\\d+)?)\\b",
"g"
);

// Only scan text nodes
function scanTextNodes(element){

let walker=document.createTreeWalker(
element,
NodeFilter.SHOW_TEXT,
{
acceptNode:function(node){

if( node.parentNode &&
(
node.parentNode.classList.contains("lds-scripture-link") ||
["SCRIPT","STYLE"].includes(node.parentNode.tagName)
)
){
return NodeFilter.FILTER_REJECT;
}

return NodeFilter.FILTER_ACCEPT;

}
}
);

let nodes=[];

while(walker.nextNode()){
nodes.push(walker.currentNode);
}

nodes.forEach(function(node){
let text=node.nodeValue;

if(!regex.test(text)){
regex.lastIndex=0;
return;
}

regex.lastIndex=0;
let span=document.createElement("span");
span.innerHTML=text.replace(regex,function(match,book,chapter,verse){
let data=books[book];
let url=
`https://www.churchofjesuschrist.org/study/scriptures/${data[0]}/${data[1]}/${chapter}.${verse}?lang=eng`;

return `
<a class="lds-scripture-link"
href="${url}"
onclick="openScripture(event,this.href)">
${match}
</a>`;

});

node.parentNode.replaceChild(span,node);
});

}
scanTextNodes(document.body);
});

function openScripture(e, url){
    e.preventDefault();
    document.getElementById("scriptureFrame").src = url;
    document.getElementById("scriptureModal").classList.add("show");
    document.body.style.overflow = "hidden";
}


window.addEventListener("load", function(){

    const scriptureModal = document.getElementById("scriptureModal");
    const scriptureFrame = document.getElementById("scriptureFrame");
    const scriptureClose = document.getElementById("scriptureClose");

    scriptureClose.onclick = function(){

        scriptureModal.classList.remove("show");
        scriptureFrame.src = "about:blank";
        document.body.style.overflow = "";

    };

    scriptureModal.onclick = function(e){

        if(e.target===scriptureModal){

            scriptureModal.classList.remove("show");
            scriptureFrame.src="about:blank";
            document.body.style.overflow="";
        }
    };
});


scriptureModal.addEventListener("click",function(e){
    if(e.target===scriptureModal){
        scriptureModal.classList.remove("show");
        scriptureFrame.src="about:blank";
        document.body.style.overflow="";
    }
});

</script>

<div id="scriptureModal">
    <div id="scriptureModalBox">
        <button id="scriptureClose">&times;</button>
        <iframe
            id="scriptureFrame"
            src="about:blank"
            loading="lazy">
        </iframe>
    </div>
</div>

Note: There must be no space between Chapters and Verses right after you write the Book Name (eg., Alma 32:6 | not this Alma 32 : 06). Also, book names must be accurate or spelled correctly.

Sample Scriptures -   

• Genesis 1:1
• 1 Nephi 3:7
• Moses 3:7
• D&C 4:1
• Joseph Smith-History 1:1
• Joseph Smith-Matthew 1:1
• Articles of Faith 1:1
• Matthew 5:7

These texts were just samples; you can go ahead and copy and paste them as a sample post to see if it works. If you have any questions or suggestions, don't hesitate to contact me anytime.