-1

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!!!!!

user3345069
  • 1
  • 4
  • you are appending the ajax content received in the `body, why? why not in a div? which is your modal window div which has to hold the ajax data? – Rohit Kumar Sep 19 '15 at 09:38
  • thankyou for your comment The modal content comes from a separate html file you can go to the website and see what i have when you click it It opens :) just closing issues... – user3345069 Sep 19 '15 at 09:40
  • use `$('.closex').on('click', function() { $('.modalwindow').fadeOut(); });` – Rohit Kumar Sep 19 '15 at 09:50
  • Still does not work >.< and there is no console error, this is what kept happening to me – user3345069 Sep 19 '15 at 09:58

4 Answers4

1

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.

Antonio Smoljan
  • 2,187
  • 1
  • 12
  • 11
  • Glad it helped be sure to mark the answer as the correct one :D – Antonio Smoljan Sep 19 '15 at 10:03
  • yeah i was trying to figure out how to do that, then i realised it was the tick! Thankyou again would you have an idea how to make it fade in? $(html).appendTo('body').fadeIn( 600 , 0); < fails – user3345069 Sep 19 '15 at 12:41
  • I would have to check the structure again since its ajax data, im sure that warrants a question of it's own at a glance. – Antonio Smoljan Sep 19 '15 at 13:41
0
In JS

// append fadeIn() method 
$('.wolf-media-link').click(function(event) {
  event.preventDefault();
  $.get(this.href, function(html) {
    $(html).appendTo('body').fadeIn();
  });
});

// write below code for fadeOut()
  $('.closex').on('click', function() { 
      $('.modalwindow').fadeOut();
  });   
//if the fadeOut not working you just reload page using 
Window.location.reload(true); into above after fadeOut() method.
Kishor
  • 13
  • 6
  • Thankyou :) Unfortunately the close did not work, though Antonio's code closed it :) It also fades out nicely Though i still have not been able to get it to fade in :/ even with " $(html).appendTo('body').fadeIn();" it does not work This is what i have $('.wolf-media-link').click(function(event) { event.preventDefault(); $.get(this.href, function(html) { $(html).appendTo('body').fadeIn( 600 , 0); }); }); $("body").on('click','.closex',function(e) { $(".modalwindow").fadeOut( 600 , 0); $(e.target).parent().fadeOut( 600 , 0); }) Thankyou – user3345069 Sep 19 '15 at 12:34
  • for some reason all my spacing disappeared and i can't fix it, i am new hear – user3345069 Sep 19 '15 at 12:38
0

For anyone who wants to know, this code works 100% :) 

$('.wolf-media-link').click(function(event) {
  event.preventDefault();
    $.get(this.href, function(html) {
      $(html).appendTo('body');
      $('.modalwindow').fadeIn(500, function(){
      $(this).addClass('show');
      });
    });
});

$("body").on('click','.closex',function(e) {
  $(".modalwindow").removeClass('show');
  $(e.target).parent().fadeOut(500);
});
user3345069
  • 1
  • 4
0

just add $(idModal).addClass('fade'); before you call $(idModal).modal('show');

Ahmad
  • 1,618
  • 5
  • 24
  • 46
Fouad
  • 1