Question

我有一段代码，其中当用户单击名为link的{{1}}时，会向用户显示zoom。

我要alert with a zoom effect时要same to happen ...

当我尝试按下它时，单击它不起作用。

如何实现？如何更正代码？

click a button

Answer 1

尝试以下

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>

Answer 2

您需要创建一个onclick属性将触发的函数。在该功能中，您可以执行自己喜欢的缩放逻辑。

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

在脚本标签内或脚本中：

function zoomLogic() {
  //Grab the element you wish the zoom effect to take place and do your logic
}

如何在jQuery中通过函数调用创建缩放效果

2 个答案: