Question

我制作了一个加载AJAX内容的模态，当你点击一个投资组合项时它就会打开，这样就可以了:)但是我不能让它淡入，我无法获得在交叉点击关闭的模式，我也需要淡出。任何帮助将不胜感激！！我已经尝试了我能想到的一切，我不明白为什么它不起作用。

点击打开模态

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

blk.html内容

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

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

听到的是我试图让它继续工作的网站，点击一个投资组合项目:) http://arielbeninca.com/ariel.com/

你不知道我会多么感激你的帮助！非常感谢!!!!!

Answer 1

这应该可以解决问题：

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

如果我是对的，这就是你想要发生的事情。代码需要在文档就绪的脚本中或在页面的末尾，以便在事件触发前正确加载内容。

Answer 2

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.

Answer 3

只需添加 $(idModal).addClass('fade'); 致电之前 $(idModal).modal('show');

Ajax Modal淡入，关闭和淡出

3 个答案: