Ajax模态淡入、关闭和淡出

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

对于任何想知道的人，此代码 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);
});

Answer 4

只需添加 $(idModal).addClass('fade'); 在你打电话之前 $(idModal).modal('show');

Ajax模态淡入、关闭和淡出

Ajax Modal fade in, close and fade out

jquery

css

ajax

fadein

simplemodal