我看过很多将数据从 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>
最佳答案
您可以通过使用.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
});
关于javascript - 离开屏幕弹出窗口，带有华丽的弹出窗口传递数据效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31039104/