Question

我正在使用crossrider创建扩展我正在使用这个在浏览器上显示图像的简单代码

$('<img style="position:fixed; z-index:999;margin-top:40%" />')
    .attr('src',('https://lh4.ggpht.com/9qGc5-maR10Fh1IpRlCuGSmge9Zzm8VQdPMNqjJkhZjtCvAQYX55MRoo4AYnYUdZhj7i=w300'))
    .prependTo('body');

现在我想在图像上添加简单的x按钮来关闭图像，并且还希望在该图像上添加链接，就像用户点击图像时会打开新窗口一样。

Answer 1

您可以使用标准jQuery来处理点击事件，使用Crossrider appAPI.openURL来打开新窗口。

因此，例如，根据您的extension.js文件中的代码使用以下内容，将创建您需要的元素并提供您寻求的功能。我将保留CSS设计，以便您根据需要进行整理：

// Add div to contain the image and X button to the body element
$('<div id="my-wrapper" style="position:fixed; z-index:999;margin-top:40%"><img /><span>X</span></div>')
  .prependTo('body');
// Configure the img src and add a click event handler that opens a new window
$('#my-wrapper img')
  .attr('src',('https://lh4.ggpht.com/9qGc5-maR10Fh1IpRlCuGSmge9Zzm8VQdPMNqjJkhZjtCvAQYX55MRoo4AYnYUdZhj7i=w300'))
  .click(function() {
    appAPI.openURL({
      url: 'http://example.com',
      where: 'window'
    });
  });
  // Add an event handler to the X button that closes/hides the image
  $('#my-wrapper span')
    .click(function() {
      $('#my-wrapper').hide();
    });

[披露：我是Crossrider员工]

如何在crossrider扩展中关闭弹出图像？

1 个答案: