I am making little warning/alert boxes with PHP and JQuery, and I am having a little problem. My problem is, when I click close, the box doesnt stay closed, and it doesnt close the right box. If there is more than one alert, I want the boxes to stack up, and be on top of each other, so when you close the top one, the one that was before it shows up. At the moment when you close it, the box behind the one I'm trying to close closes, and it only closes for about 3 seconds(Then the page gets refreshed by JQuery and opens it again.) So I need a way to delete the box, but I can't do that without getting the id of the box. Here is the code I'm using.
<script>
function open_box()
{
$("#box").show();
}
$(document).ready(function()
{
$(".close").click(function()
{
$("#box").fadeOut("slow");
//$("body").load("update_box");
});
$("#box").dblclick(function()
{
$("#box").effect("highlight");
});
});
</script>
<style>
.AlertTitle
{
font-size:2em;
text-align:center;
position:relative;
top:-8px;
}
#box
{
background-color:#fefefe;
border:2px solid #5556a7;
border-radius:10px;
width:50%;
height:20%;
position:fixed;
z-index:1000;
left:25%;
padding-left:25px;
padding-top:10px;
top:30%;
box-shadow:0px 0px 100px 2px grey;
overflow-x:hidden;
}
.close
{
position:absolute;
top:-2px;
left:-1px;
border:2px solid #5556a7;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
width:15px;
height:19px;
padding-top:2px;
padding-left:2px;
}
.close:hover
{
font-weight:bold;
cursor:pointer;
}
</style>
<?php
require("core.php");
$id = $user->user_id();
$query = mysql_query("SELECT * FROM `warnings` WHERE `user_id` = '$id' ORDER BY `id` ASC") or die(mysql_error());
while($row = mysql_fetch_assoc($query))
{
?>
<script>
open_box();
</script>
<div id="box"><?php echo $row["content"]; ?></div>
<div class="close">X</div>
<?php
}
?>
