离开屏幕弹出与放大弹出传递数据效果答案

【问题标题】：leave screen popup with magnific popup pass data-effect离开屏幕弹出与放大弹出传递数据效果
【发布时间】：2015-06-24 23:57:34
【问题描述】：

我查看了许多将数据从 Javascript 传递到 Magnific 弹出窗口的示例，当鼠标离开屏幕时，弹出窗口将触发 1 次，然后您必须刷新页面。但是，我无法让弹出窗口设置动画或具有和效果。我想使用 mfp-3d-unfold 或 mfp-zoom-out 作为效果和 #test-popup div id 作为内容有人可以帮助我如何修复代码.. 在这一点上我真的很困惑。 TKS

<html>
<head>
<title> Test leave Screen New 2</title>
<script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>

<link rel='stylesheet prefetch' href='magni/magnific-popup.css'>
<link rel="stylesheet" href="magni/magnimain1.css" media="all">
<script src="magni/prefixfree.min.js"></script>

<script>
visitchecka = 0;
$(document).on('mouseleave', leaveFromTop);


function leaveFromTop(e){
    if( e.clientY < 0 ) // less than 60px is close enough to the top

         if (visitchecka < 1 ) {
         visitchecka++;
         visitchecka++;
        // window.location='#test-popup'.css;



$.magnificPopup.open({
items : {
mainclass: 'mfp-zoom-out',
src: '#test-popup',
},
type: 'inline',
});



         }
}
</script>

</head>
<body>


<div class="links">
  <h4>Text-based:</h4>
  <ul id="inline-popups">
    <li><a href="#test-popup" data-effect="mfp-3d-unfold">3d unfold</a></li>
    <li><a href="#test-popup" data-effect="mfp-zoom-out">Zoom-out</a></li>
  </ul>

  <a href="#test-popup" class="hinge">Popup with "hinge" close effect</a> (based on animate.css)



</div>



<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">You may put any HTML here. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.foofoo</div>




<script src='magni/jquery.min213.js'></script>
<script src='magni/jquery.magnific-popup.min.js'></script>
<script src="magni/index.js"></script>

</body>
</html>

【问题讨论】：

标签： javascript html css popup magnific-popup

【解决方案1】：

您可以通过使用.click() 来做到这一点，只需调用您的元素来触发点击，弹出窗口将在窗口离开时打开...here 我已经为您做了一个示例..

$('#clickme').magnificPopup({
  delegate: 'a',
  removalDelay: 500, 
  callbacks: {
    beforeOpen: function() {
       this.st.mainClass = this.st.el.attr('data-effect');
    }
  },
  midClick: true 
});

// this is what you need 
    $(".main").mouseleave(function(){ // your window or parent element you can use document if you want
             $('.popup').click(); // trigger click for popup
    });

【讨论】：