How do I pass a background-image url from one div onto another using jQuery?

Question

I have a set of div's that when selected opens a modal window. I want the modal window's background-image url to be passed onto from the div which was selected to open it.

Here's the html for the div's and modal window :

  <div class="cover-item" style="background-image: url('https://d1nexqccu6ll7z.cloudfront.net/_images/s-14-197-61462CCC-uk.png')"></div>
  <div class="cover-item" style="background-image: url('https://d1nexqccu6ll7z.cloudfront.net/_images/s-14-1177-64ACF6EA-uk.png')"></div>
  <div class="cover-item" style="background-image: url('https://d1nexqccu6ll7z.cloudfront.net/_images/s-14-1195-057710EE-uk.png')"></div>

  <div class="modal-window"></div>

The CSS used to hide the modal initially then reveal it when called:

.modal-window //hide it out the viewport initially {
  -webkit-transform: translate(-50%, -200%);
  -ms-transform: translate(-50%, -200%);
  transform: translate(-50%, -200%);

   background-image: url(/* want to dynamically set this */)

  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

.modal-window-open //reveal it {
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

and the jQuery I've used just to open the modal window upon selection of a div:

 $('.cover-item').on('click', function() {
      $('.modal-window').toggleClass('modal-window-open');
  });

Now how do I get the specific .cover-item div to pass on its background-image url to the modal window when it is selected?

Answer 1

Try following code    
$('.cover-item').on('click', function() {
          var bg = $(this).css('background-image');
          $('.modal-window').toggleClass('modal-window-open');
          $('.modal-window').css("background-image", bg);  
      });

Answer 2

Use a combination of html() and this

$('.cover-item').on('click', function() {
      $('.modal-window').html($(this));
      $('.modal-window').toggleClass('modal-window-open');

  });

Answer 3

I guess you need to add onclick listener to the div itself and pass a reference of the div object to the function you call. Something like this:

<div class="cover-item" style="background-image: url('https://d1nexqccu6ll7z.cloudfront.net/_images/s-14-197-61462CCC-uk.png&#39;)" onclick="setBackground(this)"></div>

And Finally set the background to the .cover-item div in JS:

var setBackground = function (divObject) {
    $('.modal-window').toggleClass('modal-window-open');
    //Dynamically sets BG image
    $('.modal-window').css('background-image', divObject.style.backgroundImage);
};

P.S: Haven't tested your styles though. But the example above worked fine just by setting div's height & width.