Question

现在我有一个网格，每个网格部分/位包含一个图像，项目的名称和不同的按钮，可以从mysql数据库中删除该项目并更新价格。我想知道的是，当用户说点击图像时，会弹出一个窗口，显示额外的信息。然而，它不是通常意义上的弹出窗口，它会创建另一个窗口，而是在当前窗口/选项卡中弹出。例如。当你在Facebook上按下一张照片时，它几乎就像一个弹出窗口，您可以在其上发表评论或更改为下一张照片。有没有人知道如何做到这一点或至少是什么是整个事件/过程？

很抱歉，如果我不能说出一个正确的名字，但我自己也不知道：/

这是我现在拥有的代码。我更喜欢实际的代码解决方案，但如果你能引导我到我应该寻找的地方，我也会很高兴。我尝试在线查看，但我得到的是窗口弹出窗口。

<div class="boxes">
    <?php
    $ID = $_SESSION['SESS_MEMBER_ID'];
    $con = mysql_connect("", "", "");

    if (!$con){
      die("Cannot connect: " . mysql_error());
    }

    mysql_select_db("test", $con);

    $sql = "SELECT * FROM items WHERE member_id = $ID";

    $myData = mysql_query($sql, $con);

    $dir = 'Images';
    $symbol = '\\';
    $end = 'r.jpg';
    $currency = '£';

    while($record = mysql_fetch_array($myData)) {
      $real_name = str_replace('_', ' ', $record['Name']);
      $result = $dir . $symbol . $record['Name'] . $end;
      $value = $currency . $record['price_now'];
      $link = $record['url'];

      echo "<div class = frame>";
      echo "<div class = bit-3>";
      echo "<div class = box>" . "<img src=" . $result . " alt=some_text>";
      echo "<br />";
      echo "<br />";
      echo $real_name;
      echo "<br />";
      echo "<br />";
      echo "Price now: " . $value;
      echo "<form action = member-profile-page.php method = post>";
      echo "Desired price: ";
      echo "<td>" . "<input type = text name = desired_price value = " . $record['desired_price'] . " </td>";
      echo "<td>" . "<input type = hidden name = hidden value = " . $record['Id'] . " </td>";
      echo "&nbsp;";
      echo "<td>" . "<input type = submit name = update value = Update" . " </td>";
      echo "<br />";
      echo "<br />";
      echo "<td>" . "<input type = submit name = delete value = Delete" . " </td>";
      echo "<br />";
      echo "<br />";
      echo "<td>" . "<input type = submit name = buy value = Buy" . " </td>";
      echo "</form>";
      echo "</div>";
      echo "</div>";
      echo "</div>";
    }

    if (isset($_POST['buy'])){

      $query = "select url from items where Id = '$_POST[hidden]'";
      if ($result = mysql_query($query)) {
        $row = mysql_fetch_assoc($result);
        $code = $row['url'];
        echo "$code";
        header("Location: $code");
      }
    };

    if (isset($_POST['update'])){
      $UpdateQuery = "UPDATE items SET desired_price = '$_POST[desired_price]' WHERE Id = '$_POST[hidden]'";
      mysql_query($UpdateQuery, $con);
    };

    if (isset($_POST['delete'])){
      $DeleteQuery = "DELETE FROM items WHERE Id = '$_POST[hidden]'";
      mysql_query($DeleteQuery, $con);
    };

    mysql_close($con);
    ?>
  </div>

Answer 1

听起来你正在寻找叠加层：

http://jquerytools.org/demos/overlay/index.html

或模态：

https://jqueryui.com/dialog/

这绝不是唯一的例子;有数百种此类解决方案。不过，这些将帮助您入门。祝你好运！

Answer 2

您的想法只是当前浏览器视口中的一个图层，有一些控件让用户像“桌面窗口”一样处理它。

有很多JS框架为此提供了方便的解决方案，即jQuery UI。在那里，寻找“对话”

窗口内的弹出窗口

2 个答案: