JQuery modal popup for external web links

swgdesign
swgdesign used Ask the Experts™
on
I need to add in some jquery functionality for links to external websites, so that we may warn users that we are not inc ontrol of external content etc. The jquery box I guess should be modal and have OK and CANCEL buttons. When OK is clicked the external link is loaded.

Would be grateful of a working solution with code/demo as I haven' got that much time to implement it.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Roman GhermanSenior Software Engineer

Commented:
Why not use simple javascript?


<a href="www.someExternalLink.com" onclick='return confirm("We are not in control of external content. Do you still want to navigate?")' > test</a>
Here's an jQuery example:

1) mark all links to extarnal pages with a special classname, i.e. 'extern'

2) include this script to your html-document:

$(function(){
 $('a.extern').click(function(){ return confirm('We are not ...'); });
})

Open in new window

Author

Commented:
Maybe I should have been more specific; I am looking for some sort of modal popup window like simpleModalDialog but with the ability to go to the link when confirm or yes is clicked.

I can code a standard js confirm using jquery, but I need something classier!
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Roman GhermanSenior Software Engineer

Commented:
then use jquery confirmation dialog:

http://jqueryui.com/demos/dialog/#modal-confirmation

Click viewsource and see how it is implemented
Roman GhermanSenior Software Engineer

Commented:

Author

Commented:
I'm looking for something more lighbox'ie.

Thanks anyway for your recommendations.
Here's the solution I came up with that works very smoothly using a mix of jQuery and Thickbox plus modal confirmation buttons...


<script>
$(document).ready(function () {
	//Thickbox   
	$('a.externalURL').live('click', function(){
		tb_show('Leaving so soon?','TB_inline?height=200&amp;width=300&amp;inlineId=TBcontent');
		sLink = $(this).attr("href");
		return false;
	});
	
	$('input#TBcancel').click(function(){
		tb_remove();
	});
	
	$('input#TBsubmit').click(function(){
		tb_remove();
		window.open(sLink);
        return false;
	});
}
</script>
<div id="TBcontent" style="display: none;">
  <p>Text here...</p>
  <input type="submit" id="TBcancel" value="Cancel" />
  <input type="submit" id="TBsubmit" value="OK" />
</div>
<a href="http://www.google.co.uk" class="externalURL">link</a>

Open in new window

Author

Commented:
No one suggested anythign close to the solution I required so I coded it form scratch using jQuery.

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