Как закрыть всплывающее изображение в расширении кроссрайдера?

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]