[Shekibobo]

I am trying to achieve a ThickBox effect using inline elements to display a disclaimer about certain links after a user clicks on them.

Effectively, the process is as follows:

User clicks a specified link.
ThickBox widget appears, informing user about the site being accessed
user clicks 'OK'
Thickbox Disappears
Linked page loads.

The attached image shows the effect I am trying to achieve. Basically, it will tell them about the site being linked to, then sends them to the new page after clicking okay.

Ideally, the new page would be loading while the ThickBox widget is being displayed, but this is not a necessity.

I've been searching for methods to achieve this effect to no avail. I am an extreme novice when it comes to javascript, but not with general programming. Details would be extremely helpful. If there are alternative solutions to this problem, I am more than willing to read about them as well, but I have found very little to this effect.

Thanks.

[Mawer IV]

I'm not entirely familiar with how Thickbox works but to achieve the same effect more simply all you have to do is this:

<a href="http://google.com" onclick="disclamer()">Google</a>
				
<script type="text/javascript">
	function disclamer() {
		alert('We are not resposible for any of the content on the website you are going to.');
		//You could potentially put the thickbox stuff in here
	}
</script>

The function is actually overkill because you could put the alert() in the onclick attr.

I know this doesn't exactly awnser your question but I hope it helps.

[Shekibobo]

This is definitely helpful and definitely achieves, in part, what I am trying to accomplish. However, I'm not exactly sure it will work this way with ThickBox. In order to get the effect I want in Thickbox, it requires a tag like this:

<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">External Blog Link</a>

Therefore, I'm not sure it's possible for me to use it to link to a new page, unless you can link to more than one link in a single href.

[Mawer IV]

I understand now;
I presume that that link then opens up the thickbox whose html content you have previously defined earlier in the document or whatever.

So what you can do is put this or similar in the thickbox content:

<!--Asuming that you define a thickbox through a div with class "thickbox"-->
<div class="thickbox">
	<p>We are not resposible for any of the content on the website you are going to.</p>
					
	<button onclick="window.location = 'http://google.com'">Ok</button>
</div>

[Shekibobo]

Okay, I see where you're coming from. Here is the content of the hidden div:

<div id="hiddenModalContent" style="display:none">
<p>We are not responsible for the things you see on this page.</p>
<p style="text-align:center"><input type="submit" id="Login" value="&nbsp;&nbsp;Ok&nbsp;&nbsp;" onclick="tb_remove()" /></p>
</div>

Here is the content from the thickbox.js file regarding tb_remove():

function tb_remove() {
     $("#TB_imageOff").unbind("click");
    $("#TB_closeWindowButton").unbind("click");
    $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
    $("#TB_load").remove();
    if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
        $("body","html").css({height: "auto", width: "auto"});
        $("html").css("overflow","");
    }

f

If I replace onclick="tb_remove" with a uri, the program simply won't work.

Would it be possible to pass a web address into the tb_remove() function so that it will then move on to that page after finishing all of it's functions? For instance:

<div id="hiddenModalContent" style="display:none">
<p>We are not responsible for the things you see on this page.</p>
<p style="text-align:center"><input type="submit" id="Login" value="&nbsp;&nbsp;Ok&nbsp;&nbsp;" onclick="tb_remove('http://www.google.com')" /></p>
</div>

[Mawer IV]

Originally Posted by Shekibobo

Okay, I see where you're coming from. Here is the content of the hidden div:

<div id="hiddenModalContent" style="display:none">
<p>We are not responsible for the things you see on this page.</p>
<p style="text-align:center"><input type="submit" id="Login" value="&nbsp;&nbsp;Ok&nbsp;&nbsp;" onclick="tb_remove()" /></p>
</div>

Here is the content from the thickbox.js file regarding tb_remove():

function tb_remove() {
     $("#TB_imageOff").unbind("click");
    $("#TB_closeWindowButton").unbind("click");
    $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
    $("#TB_load").remove();
    if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
        $("body","html").css({height: "auto", width: "auto"});
        $("html").css("overflow","");
    }

f

If I replace onclick="tb_remove" with a uri, the program simply won't work.

Would it be possible to pass a web address into the tb_remove() function so that it will then move on to that page after finishing all of it's functions? For instance:

<div id="hiddenModalContent" style="display:none">
<p>We are not responsible for the things you see on this page.</p>
<p style="text-align:center"><input type="submit" id="Login" value="&nbsp;&nbsp;Ok&nbsp;&nbsp;" onclick="tb_remove('http://www.google.com')" /></p>
</div>

Totally,

Asuming that you pass the URI like you suggested:

function tb_remove(uri) {
     $("#TB_imageOff").unbind("click");
     $("#TB_closeWindowButton").unbind("click");
     $("#TB_window").fadeOut("fast",function(
     {$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
     $("#TB_load").remove();
     if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
          $("body","html").css({height: "auto", width: "auto"});
     $("html").css("overflow","");

     //Once thickbox has been removed send user to provided URI
     window.location = uri;
}

This should work however I can't fully test it so....


P.S. Considering you're sending the user away from your site does it really matter if the thickbox is actually closed?

[Shekibobo]

That did it. Awesome, and thanks. ThickBox now works as an external page warning, or pseudo-redirect page.

Regarding PS, I tried replacing tb_remove() with the website, and it just didn't work.

However, the new code for tb_replace() is:

function tb_remove(uri) {
     $("#TB_imageOff").unbind("click");
    $("#TB_closeWindowButton").unbind("click");
    $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
    $("#TB_load").remove();
    if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
        $("body","html").css({height: "auto", width: "auto"});
        $("html").css("overflow","");
    }
    document.onkeydown = "";
    document.onkeyup = "";
    
     //Once thickbox has been removed send user to provided URI
     window.location = uri;

    return false;
}

[Mawer IV]

I'm glad I could help