Search code examples
jquerycssajaxfadeinsimplemodal

Ajax Modal fade in, close and fade out


I made a modal that loads the content from AJAX, it opens up when you click a portfolio item, so that works great :) but i can't get it to fade in, i can't get the modal to close on the cross click and i also need to to fade out. Any help would be greatly appreciated!! i have tried everything i can think of i i don't understand why it was not working.

Clicking to open modal

<a href="works/blk.html" rel="modal:open" class="wolf-media-link" ><img src="img/heno/featured.jpg" alt="Heno"></a>

blk.html content

    <div class="closex"><div class="inner-closex"></div></div>
<div class="modalwindow">
    <section class="portfolio-item blk">
        <div id="description">
            <h1>Blk Sport</h1>
            <h4>Graphic Design</h4>
            <p>BLK is an international sports company I worked for as a graphic designer. Some of my work included print design such as product catalogues and advertisements, EDMs, social media designs, logo designs, user interface design and web design. The web design and product range logo below are purely a conceptual pitch. </p>
        </div>
        <img id="blkwebimage"src="img/blk/web.png">

    </section>
</div>

The JS

    // this needs to fade in
$('.wolf-media-link').click(function(event) {
  event.preventDefault();
  $.get(this.href, function(html) {
    $(html).appendTo('body');
  });
});


  $('.closex').on('click', function() { 
//close the modal with a fade out effect
  });   

And hear is the site i am trying to get it to work on, click a portfolio item :) http://arielbeninca.com/ariel.com/

you have no idea how grateful i would be for the help! Thankyou so much!!!!!


Solution

  • This should do the trick:

    $("body").on('click','.closex',function(e) {
      $(".modalwindow").fadeOut();
      $(e.target).parent().remove();
    })
    

    If i am correct this is what you want to happen. The code needs to be in script with document ready or at the end of the page so the content is loaded correctly before the events fire.