Need a JQuery popup when user clicks on link to direct them to possible choices.

Montoya
Montoya used Ask the Experts™
on
Hi team! I need a JQuery solution to do the following:

When you click on a link to a page, a popup comes up with instructions: "If you don't have access to this resource click here (link option A), if you have access click (option b)". This 'popup' also has a checkbox option "Never show this again", with the obvious result if they click on that option.

*The option to never show again should work only when they check the box and click on Option B (unless you have a better way). Once the option to never see again has been chosen, then clicking on the original link will ignore the code and take them directly to the desired page.

Thank you very much!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

I don't follow the logical of your case..
Can you elaborate why you are doing this?

I mean If user don't get access to some page, user should not he see the link or item...
So maybe you should rethink the logicial.
Also user hate popup, this is anoying.
Plus having a form in a popup, is not user friendly specially on small view / mobile device.

Here is an example on how you can rethink the case
I guess you have login / backend with user roles, so it displayed the allowed items / menu to this user,
if user want to get access to other feature usually the link goes to login (user is not logged) or upgrade page (could be pricing list or shopping cart item). So no popup this could be just a redirection, a text and a button to redirect the user
You'd like to have this feature --- upgrade your account or login depending of the case

About the never show again, this can be done using cookies or localstorage or DB if user is logged.
MontoyaProcess Improvement Mgr

Author

Commented:
Yes,

There's a resource which I do not control (Enterprise).. let's call it <a href="myresource.html">.. some people do not have immediate access to the resource. When you don't have access, the page simply says "This has not been shared with you". Not a great user experience.
Instead of sending them there, when they may not have rights to the resource, I'm creating a link on my page "reach the resource" (making up names).

When you click on my link to the site, I want to give them two options plus an opt out option. 1 go get permissions to the site, go straight to the site, and opt out.
leakim971Multitechnician
Top Expert 2014

Commented:
are you a programmer or just looking for someone to do the work for you?
MontoyaProcess Improvement Mgr

Author

Commented:
programmer and expert for some time. A bit surprised at the answer
Multitechnician
Top Expert 2014
Commented:
check this example : https://jqueryui.com/dialog/#modal-confirmation
click on the view source link/button

add the parameter and value : autoOpen: false,

not sure you can add a class for all the links requiring this

$(document).on("click", ".classForThatLinks", function(event) {
    if ( !($.cookie('nevershowthisagain') * 1) ) { // https://github.com/carhartl/jquery-cookie
        event.preventDefault();
        $("#dialog").dialog("open"); 
    }
});

Open in new window


replace the buttons by the following :

        "If you don't have access to this resource click here": function() {
          // not sure what you want to do when user click here
          $( this ).dialog( "close" );
        },
        "if you have access click": function() {
          // not sure what you want to do when user click here
          $( this ).dialog( "close" );
        }

Open in new window


the checkbox :

$(document).on("change", ".checkboxClass", function() {
      $.cookie('nevershowthisagain', $(this).is(":checked") ); 
});

Open in new window

Per experience and best practice if user don't have access to something it should not see it and should not access it .

Using server side code  you could display link only if user is allowed
if not if you want to advertise it just show a text message and a button so user will be redirected to form  / page to request the new plan + payment  method.
When everything get confirmed, on next login  the link will be now visible instead of the message & button

Using Javascript it is not reliable and could be bypassed by th browser console so make sure you have server side validation on your page too.
Also cookies and localstorage will be deleted when user clear the cache so you may think to save the value in DB if user is logged in.
MontoyaProcess Improvement Mgr

Author

Commented:
I went with a different solution altogether, but I really appreciate the input. The solution above is correct, but I decided to go with a tooltip solution instead.

Thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial