• Resolved George

    (@quantum_leap)


    Is it possible to have links inside the modal follow the link then close the modal? I am trying to have table of contents in the modal and looking for a way to close it once a headiling link from the TOC plugin inside the modal has been clicked!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author merbmerb

    (@merbmerb)

    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, 10 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?

    Plugin Author merbmerb

    (@merbmerb)

    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.

    Plugin Author merbmerb

    (@merbmerb)

    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.

    Plugin Author merbmerb

    (@merbmerb)

    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, 10 months ago by merbmerb.
    • This reply was modified 1 year, 10 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?

    Plugin Author merbmerb

    (@merbmerb)

    Sure send it to merbird1160@hotmail.com

    Plugin Author merbmerb

    (@merbmerb)

    I assume you got this working

    Thread Starter George

    (@quantum_leap)

    Sorry for the delay, I made it work with jQuery, thank you!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Modal link to close the modal’ is closed to new replies.