I assume you are linking to somewhere on the same page? If you can add the following class ‘bod-block-title-closer’ to the link then the modal will close after the link is clicked. Let me know if you have any problems.
-
This reply was modified 1 year, 8 months ago by
merbmerb.
Thread Starter
George
(@quantum_leap)
Awesome, it worked, thanks! Two lines of JavaScript code:
let element = document.getElementsByClassName(".modal-toc .ib-toc-body .ib-toc-anchors li a");
element.classList.add("bod-block-title-closer");
Thread Starter
George
(@quantum_leap)
Sorry, this actually didn’t work. Is there a way to add a class to .modal-toc .ib-toc-body .ib-toc-anchors li a once the modal trigger has been clicked?
You could try something like this:
<script>
var classname = document.getElementsByClassName("bod-btn");
var myFunction = function() {
let element = document.getElementsByClassName(".modal-toc .ib-toc-body .ib-toc-anchors li a"); element.classList.add("bod-block-title-closer");
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}
</script>
My guess is the JS code you currently have is trying to run before the table of contents has been generated. So alternately you could try moving the JS code so it’s located after the table of contents JS. Either way should work.
Actually looking at your code you may just have a bug. document.getElementsByClassName returns an array. Try this:
let elements = document.getElementsByClassName(".modal-toc .ib-toc-body .ib-toc-anchors li a");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.add("bod-block-title-closer");
}
Thread Starter
George
(@quantum_leap)
Hi thanks for getting back. I have my script to the footer but the problem is that the .modal-toc .ib-toc-body .ib-toc-anchors li a class is available only when the button modal loads the TOC in the actual modal. Here is what I have so far:
var classname = document.getElementsByClassName("bod-btn");
var myFunction = function() {
let elements = document.getElementsByClassName(".modal-toc .ib-toc-body .ib-toc-anchors li a");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.add("bod-block-title-closer");
}
}
But the modal is not closed when hitting a link inside the TOC popup. I think there needs to be a click function somewhere.
You do have another bug in your code (sorry should have spotted it the first time).
let elements = document.getElementsByClassName(".modal-toc .ib-toc-body .ib-toc-anchors li a");
You can only use the above code to select based on classes, and you cannot select any non-class elements. You also do not specify the ‘.’ in the selector. So it would be
let elements = document.getElementsByClassName(“modal-toc ib-toc-body”);
You will need to use querySelectorAll()
Here is a tutorial on how to use:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_queryselectorall_class
and your code would be
let elements = document.querySelectorAll(".modal-toc .ib-toc-body .ib-toc-anchors li a");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.add("bod-block-title-closer");
}
If this does not work can you send me a link to a sample page and I will take a look?
-
This reply was modified 1 year, 8 months ago by merbmerb.
-
This reply was modified 1 year, 8 months ago by merbmerb.
Thread Starter
George
(@quantum_leap)
Didn’t work. I think I need something like this:
const btn = document.querySelector(".bod-btn");
btn.addEventListener("click", addLink);
function addLink(){
let elements = document.querySelectorAll(".modal-toc .ib-toc-body .ib-toc-anchors li a");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.add("bod-block-title-closer");
}
}
But that didn’t work either.
Would it be possible to send the link to the page through email instead of here?
I assume you got this working
Thread Starter
George
(@quantum_leap)
Sorry for the delay, I made it work with jQuery, thank you!
