Question

我正在使用PHP和JQuery制作一些警告/警告框，我遇到了一些问题。我的问题是，当我点击关闭时，框不会保持关闭，并且它不会关闭右框。如果有多个警报，我希望盒子堆叠起来，并且彼此重叠，所以当你关闭顶部的那个时，它就会出现在它之前。在你关闭它的那一刻，我试图关闭的那个框后面的框关闭，它只关闭了大约3秒（然后页面被JQuery刷新并再次打开它。）所以我需要一种方法来删除盒子，但如果没有获得盒子的ID，我不能这样做。这是我正在使用的代码。

<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

}

?>

Answer 1

您不能对多个元素使用相同的ID

<div id="box"><?php echo $row["content"]; ?></div>是罪魁祸首

使用

<div class="box"><?php echo $row["content"]; ?></div>
    <div class="close">X</div>

更改样式以引用.box而不是#box

检查this fiddle

PHP和JQuery删除了正确的东西

1 个答案: