Ajax Modal 淡入、关闭和淡出答案

【问题标题】：Ajax Modal fade in, close and fade outAjax Modal 淡入、关闭和淡出
【发布时间】：2015-09-19 09:29:29
【问题描述】：

我制作了一个从 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>

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

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

【问题讨论】：

你在`body中附加了接收到的ajax内容，为什么？为什么不在 div 中？您的模态窗口 div 是哪个必须保存 ajax 数据？
感谢您的评论模态内容来自一个单独的 html 文件，您可以访问该网站并在单击它时查看我拥有的内容它打开 :) 只是关闭问题...
使用$('.closex').on('click', function() { $('.modalwindow').fadeOut(); });
仍然无法正常工作>.

标签： jquery css ajax fadein simplemodal

【解决方案1】：

这应该可以解决问题：

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

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

【讨论】：

很高兴它有助于确保将答案标记为正确答案：D
是的，我试图弄清楚如何做到这一点，然后我意识到这是滴答声！再次谢谢你你知道如何让它淡入淡出吗？ $(html).appendTo('body').fadeIn(600, 0);
我必须再次检查结构，因为它的 ajax 数据，我确信这保证了它自己的问题一目了然。

【解决方案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.

【讨论】：

Thankyou :) 不幸的是，虽然安东尼奥的代码关闭了它，但关闭并没有起作用 :) 它也很好地淡出虽然我仍然无法让它淡入：/ 即使使用“$( html).appendTo('body').fadeIn();"它不起作用这就是我所拥有的 $('.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); }) 谢谢
由于某种原因，我所有的间距都消失了，我无法修复它，我是新手

【解决方案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);
});

【讨论】：

【解决方案4】：

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

【讨论】：