我有代码,其中当用户单击一个link
命名zoom
的alert with a zoom effect
用户时显示给用户。
我想当same to happen
我click a button
...
当我尝试按一下按钮时,它不起作用。
如何实现?如何更正代码?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css'>
<style>
html,
body {
margin: 0;
padding: 10px;
-webkit-backface-visibility: hidden;
}
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width: auto;
max-width: 400px;
margin: 0 auto;
}
/*
====== Zoom effect ======
*/
.mfp-zoom-in {
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-in .mfp-with-anim {
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
transform: scale(0.8);
opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
</style>
</head>
<body>
<div class="links">
<div class id="inline-popups">
<a href="#test-popup" data-effect="mfp-zoom-in">Zoom</a>
<button onClick="#test-popup" data-effect="mfp-zoom-in">test</button>
</div>
</div>
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Game completed sucessfull</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
试试下面
var theControl = $("#test-popup");
$('#clickMe').magnificPopup({
items: {
src: theControl,
},
type: 'inline',
mainClass: 'mfp-with-zoom', // this class is for CSS animation below
zoom: {
enabled: true, // By default it's false, so don't forget to enable it
duration: 300, // duration of the effect, in milliseconds
easing: 'ease-in-out', // CSS transition easing function
// The "opener" function should return the element from which popup will be zoomed in
// and to which popup will be scaled down
// By defailt it looks for an image tag:
}
});
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css'>
<style>
html,
body {
margin: 0;
padding: 10px;
-webkit-backface-visibility: hidden;
}
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width: auto;
max-width: 400px;
margin: 0 auto;
}
/*
====== Zoom effect ======
*/
.mfp-zoom-in {
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-in .mfp-with-anim {
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
transform: scale(0.8);
opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<button id="clickMe" data-effect="mfp-zoom-in">test</button>
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Game completed sucessfully</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句