Javascript 如何在jquery中使用函数调用创建缩放效果

我有一个代码，当用户单击名为

zoom

的

链接时，会向用户显示具有缩放效果的
警报

当我点击按钮时，我希望同样的事情发生

当我尝试点击按钮时，它不工作

如何实现这一点？如何更正代码



html，
身体{
保证金：0；
填充：10px；
-webkit背面可见性：隐藏；
}
/*基于文本的弹出式样式*/
.白色弹出窗口{
位置：相对位置；
背景：#FFF；
填充：25px；
宽度：自动；
最大宽度：400px；
保证金：0自动；
}
/* 
======缩放效果======
*/
.mfp放大{
/*起始状态*/
/*生动活泼*/
/*制作动画*/
}
.mfp放大.mfp带动画{
不透明度：0；
过渡：所有0.2秒缓进缓出；
变换：比例（0.8）；
}
.mfp-zoom-in.mfp-bg{
不透明度：0；
过渡：所有0.3秒放松；
}
.mfp-zoom-in.mfp-ready.mfp带动画{
不透明度：1；
变换：比例（1）；
}
.mfp-zoom-in.mfp-ready.mfp-bg{
不透明度：0.8；
}
.mfp-zoom-in.mfp-removing.mfp with anim{
变换：比例（0.8）；
不透明度：0；
}
.mfp-zoom-in.mfp-removing.mfp-bg{
不透明度：0；
}
测试
游戏成功完成
您需要创建一个
onclick
属性将触发的函数。在该函数中，可以执行您喜欢的缩放逻辑

 <button onclick="zoomLogic" data-effect="mfp-zoom-in">test</button>

试试下面的方法


var theControl=$（“#测试弹出窗口”）；
$（“#单击我”）。放大弹出窗口({
项目：{
src：控制，
},
键入：“内联”，
mainClass:'mfp with zoom'，//该类用于下面的CSS动画
缩放：{
enabled:true，//默认为false，所以不要忘记启用它
持续时间：300，//效果的持续时间，以毫秒为单位
放松：“放松输入输出”，//CSS过渡放松功能
//“opener”函数应该返回要放大弹出窗口的元素
//以及将缩小到哪个弹出窗口
//通过defailt查找图像标签：
}
});

html，
身体{
保证金：0；
填充：10px；
-webkit背面可见性：隐藏；
}
/*基于文本的弹出式样式*/
.白色弹出窗口{
位置：相对位置；
背景：#FFF；
填充：25px；
宽度：自动；
最大宽度：400px；
保证金：0自动；
}
/*
======缩放效果======
*/
.mfp放大{
/*起始状态*/
/*生动活泼*/
/*制作动画*/
}
.mfp放大.mfp带动画{
不透明度：0；
过渡：所有0.2秒缓进缓出；
变换：比例（0.8）；
}
.mfp-zoom-in.mfp-bg{
不透明度：0；
过渡：所有0.3秒放松；
}
.mfp-zoom-in.mfp-ready.mfp带动画{
不透明度：1；
变换：比例（1）；
}
.mfp-zoom-in.mfp-ready.mfp-bg{
不透明度：0.8；
}
.mfp-zoom-in.mfp-removing.mfp with anim{
变换：比例（0.8）；
不透明度：0；
}
.mfp-zoom-in.mfp-removing.mfp-bg{
不透明度：0；
}


测试
游戏成功完成
测试将不起作用。您必须编写一些jQuery代码来弹出div并给出效果。您的index.js文件是否具有与缩放相关的功能。如果是，请share@ratheesh不，它没有与缩放相关的功能将jQuery中的mainClass更改为mainClass:“mfp使用动画放大mfp”，您可以相应地给出样式
function zoomLogic() {
  //Grab the element you wish the zoom effect to take place and do your logic
}