how to close popup image in crossrider extension?

Question

i am creating extension using crossrider i am using this simple code which showing image on browser

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

now i want to add simple x button on image to close image and also want to add link on that image like when user click on image will open new window.

Answer 1

You can use standard jQuery to handle the click events and the Crossrider appAPI.openURL to open a new window.

So, for example, using the following based on your code in your extension.js file, will create the elements you require and provide the functionality you seek. I'll leave the CSS design for you to tidy up as you require:

// 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();
    });

[Disclosure: I am a Crossrider employee]