javascript - 窗口内弹出

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/

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