javascript - PHP and JQuery deleting the right thing -
i making little warning/alert boxes php , jquery, , having little problem. problem is, when click close, box doesnt stay closed, , doesnt close right box. if there more 1 alert, want boxes stack up, , on top of each other, when close top one, 1 before shows up. @ moment when close it, box behind 1 i'm trying close closes, , closes 3 seconds(then page gets refreshed jquery , opens again.) need way delete box, can't without getting id of box. here 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 * `warnings` `user_id` = '$id' order `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 } ?>
you cannot use same id more 1 element
<div id="box"><?php echo $row["content"]; ?></div> culprit
use
<div class="box"><?php echo $row["content"]; ?></div> <div class="close">x</div> change style refer .box instead of #box
check this fiddle
Comments
Post a Comment