Pop up window has issues

Im following

to have pop-up windows
as you can see, the link goes to the target

							  <a href="#COMMS-1" class="highlightit tooltip" title="Elevation 255-A<br>Elevation 254-A<br>COMMUNICATIONS EQUIPMENT GROUP<br>Elevation 251-A<br>Elevation 250-A">
							  <img src="images/COMMS-1.jpg" class="img-fluid img-thumbnail" name="1">
							  </a>

but nothing happens, but if go to the URL without clicking the link, the modal seems to work

Do you mean the image isn’t showing? If it’s not in the relative path based on the page, you’re correct, it’s not going to show. If you put an absolute path, it will.

(code formatted to same format as baseline to get all the existing styles to work easily)

    <a class="close" href="#COMMS-1" class="highlightit tooltip" title="Elevation 255-A<br>Elevation 254-A<br>COMMUNICATIONS EQUIPMENT GROUP<br>Elevation 251-A<br>Elevation 250-A">&times;</a>
    <div class="content">
							  <img src="https://sd.keepcalm-o-matic.co.uk/i-w600/keep-calm-and-test-me-2.jpg" class="img-fluid img-thumbnail" name="1">
							  </div>

results in

ok, I narowed the problem down a little I have this script

<script>
// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });

</script>

which allows for scrolling down to some targets.
Is there a way to only specify targets within a div of a certain class istead of every target (it seems to be the first line of the script, cause if I remove that script, it works.

It looks the script mentions a way of not following some links.

e…g.

  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')

I’m assuming you could therefore add your modal href into the mix.

.not(‘[href=“#COMMS-1”]’)

e.g.

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .not('[href="#COMMS-1"]')
  .click(function(event) {
    // On-page links
etc...

Or give a class to all the links you want to scroll to and use that class.

Instead of this:

$('a[href*="#"]')

Do this:

$('.scroll-link')

Then give a class of scroll-link to all those scrolling anchors and avoid hitting the ones you don’t want to scroll to.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.