Need a notification solution

Design help Custom code
1

I need to design some sort of notification that will come up when a link is clicked, informing the user they are leaving the original site and opening a third-party site. This would come up on multiple links on the same page, on different pages on the site. I’ve tried using the modal windows but they either void out the link’s clickability or when I create multiple windows they won’t work together on the same page. A single window won’t work because if I add “continue” to the window, there is only one hyperlink available. I wish I could make an “alt tag” box appear over each link to just let the user know they are leaving the site but that isn’t working.

Any suggestions?

Here is an example of what I need (the modal that I’ve implemented…)

1045×777 231 KB

Thanks in advance for any ideas!

Tracy

Here is my public share link: LINK
(how to access public share link)

2

Not sure why multi-modals would not solve this issue.

  • You can create a different modal for each link.
  • 10 links… 10 modals… 10 different destinations.
  • The biggest problem is managing 10 modals.

(IMO) The cleaner solution is to JQuery or JS.

With JQuery or JS

  • you can manipulate the click so that it passes a parameter to the 1 modal.
  • Base on the parameter… a specific message is display along with it’s associated link.

So basically… if users clicks link 1… JS processes the request and fills a variable with a preselected paragraph for link 1.

Obviously… the JQuery route is harder… but it’s do-able.

And it’s much cleaner.

@bart is pretty is this kinda of stuff. I think @waldo is also.

3

I created 2 modals and they didn’t want to work on the same page (using the Modal Wrapper video tutorial x’s 2) so then I kept the wrapper and tried creating just different div blocks…they wouldn’t work either.

Each time the modal cancels out the hyper-link associated with the original images and text links. I am just having a heck of a time.

I could use JQuery or JavaScript but aren’t we limited on code characters for custom code? I have to do this to A LOT of pages…a LOT of links. Plus I already have other scripts and custom code for other aspects of the site, already on certain pages. I was hoping to use a pre-built webflow solution but maybe I just won’t be able to do that. :confused:

Thanks for the suggestions…I may just have to go that route, somehow!

4

Did you use a different ID for each modal ?

As for the limit… yes there is a limit. Not sure how much text you have to display.

What I was thinking about was (as an example)

link1… calls js script - passes “1”…
js script determined what text to display and what the destination url is.
js then dom’s the on-form modal and changes the inside html value of a preset div already in the modal.
js then doms the preset link in the modal as well.

Yes - You could have a problem if the text is large… but you are basically just changing the value inside the div with js.

If the text is too large… you setup multiple divs that js would manipulate.

You could hide what whatever (using js) that were not needed…

I did this along with a database a while back.

Basically… each link called ajax a call to a database this was then then written into a modal
then the modal lit up.

5

I did…numbered them 1, 2, 3 etc…

6

This is a simple proof-of-concept. Paste this in your Site Settings > Custom Code > Footer Code, save and publish.

<script>
Webflow.push(function() {
    $('a').each(function() {
      if (this.href !== "#" && this.href.indexOf('/') !== 0 && this.href.indexOf(location.hostname) === -1) {
        $(this).attr('target', '_blank')
          .click(function() {
            return confirm('You are now leaving this site. By clicking OK, you acknowledge this statement.');
          });
      }
    });
});
</script>

DEMO: Confirm when clicking external link - JSFiddle - Code Playground

If you need further customization, feel free to contact me on http://webflowexpert.com

1 Like
7

This is awesome except for the checkbox that allows them to opt out of receiving the notices. I know they are annoying but I also have to conform to regulations that require them :confused: I’ve read this is a “browser” thing but I still need to remove that option.

8

You can try other options as well

jquery - Custom "confirm" dialog in JavaScript? - Stack Overflow, javascript - Custom alert and confirm box in jquery - Stack Overflow, confirmbutton - JavaScript confirm box with custom buttons - Stack Overflow

9

OH awesome! Thank you so much, I will check these out and see what may work!

10

I was able to get it to work and have the checkbox removed with this code:

<script>

Webflow.push(function() {
$(‘a’).each(function() {
if (this.href !== “#” && this.href.indexOf(‘/’) !== 0 && this.href.indexOf(location.hostname) === -1) {
$(this).attr(‘target’, ‘_blank’)
.click(function() { return confirm(‘NOTICE: You are leaving our website and will enter a website maintained by a third party. We are providing a link to the third party website solely as a convenience to you, because we believe that website may provide useful content. We are not, by referring or linking to the third party website, incorporating its contents into our own website. We do not endorse or guarantee, and we disclaim any responsibility for: the content, products or services offered on that website, its performance or interaction with your computer, its security and privacy policies and practices, and any consequences that may result from visiting that website. By clicking OK, you acknowledge this statement.’);
});
}
});
});

But because Webflow requires documents to be stored outside of their servers, the links to PDFs are all getting the notifications :confused: I’d like to exclude that URL from getting the notification so the PDF access seems a little more seemless. Plus I have another “external” URL that I need to exclude because it is going to a parent company.

Anyone have ideas on what that code should be to exclude a URL or two?

Thanks! I’m making good strides thanks to the community support!!

1321×888 276 KB

11

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