如何在用户单击时创建带有弹出窗格的图像

how to create image with a popup pane when user click?

本文关键字：图像 用户 单击 创建      更新时间：2023-09-26

当我点击图片（html标签）时，我想显示一个弹出面板（例如：当我们点击图片时，就像facebook中的弹出面板）。注意：弹出窗格应该包含图像和文本（从数据库检索）。

我怎么能那样做？thx您提前

类似以下内容：

在HTML页面中，添加以下代码：

（当然，首先在您的页面上包含Jquery）

当我点击图像（html标签）时，

$('#idOfWhateveriWant').on('click',function(){
});

我想显示一个弹出面板（例如：当我们点击图片时，像facebook中的弹出面板）。

$('#idOfWhateveriWant').on('click',function(){
   //window.open("whatever") 
   //ABOVE NOT RECOMMENDED
   //use below instead
   $.ajax({
   url: 'ajax/test.php',
   success: function(data) {
      $('.result').html(data);
      //or use some jquery plugin you made 
      //or external plugin
      // to make your pane appear
      //$.WHateverPopupPanePlugin(whatever,data)
      alert('Load was performed.');
   }); //SEE http://api.jquery.com/jQuery.ajax/
});

注意：弹出窗格应该包含图像和文本（从数据库）。

在ajax/test.php中：

  1. 首先配置mysql数据库
  2. 在其中放入一些数据
  3. 添加一些类似的代码来访问数据库中的内容，并将其作为JSON对象进行回显

Php示例如下：

 <?php 
  //--------------------------------------------------------------------------
  // Example php script for fetching data from mysql database
  //--------------------------------------------------------------------------
  $host = "localhost";
  $user = "root";
  $pass = "root";
  $databaseName = "ajax01";
  $tableName = "variables";
  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------
  include 'DB.php';
  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);
  //--------------------------------------------------------------------------
  // 2) Query database for data
  //--------------------------------------------------------------------------
  $result = mysql_query("SELECT * FROM $tableName");          //query
  $array = mysql_fetch_row($result);                          //fetch result    
  //--------------------------------------------------------------------------
  // 3) echo result as json 
  //--------------------------------------------------------------------------
  echo json_encode($array);
?>

附加帮助：

  • http://api.jquery.com/jQuery.ajax/
  • http://api.jquery.com
  • http://openenergymonitor.org/emon/node/107
相关文章：