Close jQuery thickbox on button click

Question

Here is my jQuery:

<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/thickbox.js"></script>
<script type="text/javascript"

$('#button').click(function(){
     $('#TB_window').fadeOut();
});

</script>

Html:

  <input type="submit" id="button" value="clse" >

I tried this function, but it's not working.

Solution 1

Thickbox have their built in method. tb_remove just call this method tb_remove(); wherever you need. It will close thickbox properly.

If you use $('#TB_window').fadeOut(); , TB_overlay DIV will remain open. If you again do something nonsense like $('#TB_overlay').fadeOut(); then it will create problem for your thickbox. And thickbox will stop function.

Solution 2

This solution worked for me, try it:

$(document).ready(function{
  $('#button').click(function(){
   self.parent.tb_remove();
  });
});

Solution 3

You have to prevent the execution of the default event of the input. Change your code to this:

$('#button').click(function(){
     $('#TB_window').fadeOut();
     e.preventDefault();
});

Solution 4

If you are including thickbox.js, which is obvious, than try.....

$('#closeTBWindow').click(tb_remove);

View more solutions

Comments

[Makarand Mane]

Thickbox have their built in method. tb_remove just call this method tb_remove(); wherever you need. It will close thickbox properly. read more my answer written below . stackoverflow.com/a/21216272/1124612

[Jezen Thomas]

Probably better if you use an e.preventDefault(). Stop misusing return false.

[Kash]

One line to do it: $('#TB_window, #TB_overlay').fadeOut();

[Kash]

I love this sloution because it allows to reopen if clicked. the updated code should be: $('#TB_closeWindowButton').click();

[Typel]

Note that if modal=true, tb_remove() should be called from within the thickbox content. For example, <div id="myThickbox"><button onclick="tb_remove();">X</button></div> .