Question

I am using jquery Tools for overlaying a table. It works fine except when i click the close button, it reloads the page. Can anybody tell me why this page is getting reloaded? I want to stop it. Here is the actual code

jQuery Code:

<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img[rel]").overlay()});
</script>

HTML Code:

<div class="simple_overlay" id="plusi" style="top:400.8px;overflow:visible;display:none;" >
/* image is clicked with id = plusi*/
<div class="heading_img1">Discuss Any Diet</div>
<table width="1100" border="0" cellspacing="12" cellpadding="0" class="table">
<tr>
<td>    3 Day Diet  </td>
<td>    3 Hour Diet </td>
<td>    7 Day Diet  </td></tr></table>
<p><button class="close">X</button></p>
</div>

CSS Code:

.simple_overlay {
z-index:10000;
background-color:white;
width:1100px;   
min-height:200px;
border:1px solid ##2FBDF0;
-moz-border-radius:10px 10px 10px 10px;
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;  
}

.simple_overlay .close {
background-image:white;
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}

Answer 1

Try adding type="button" to the <button> element. The normal behavior for a <button> is to act as a submit button, so my guess is that this is triggering a form submission (to the current page).