窗口内的弹出窗口

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。在这里，查找“对话”