How to call a jquery buttonclick function from inside a javascript function

Question

I have buttonclick function in jquery which gives a magnified popup effect of given div test-popup in button test ..

i want that magnified popup effect of div test-popup to happen when i call javascript function caller() when i click button go .

How to achieve this?

 function caller() { $.magnifiedeffect(); }; $.magnifiedeffect = function() { }; var theControl = $("#test-popup"); $('#clickMe').magnificPopup({ items: { src: theControl, }, type: 'inline', mainClass: 'mfp-zoom-in mfp-with-anim', // 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: } }); 

 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; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" /> <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> <input type="button" value="go" onclick=" caller();"> <button id="clickMe" data-effect="mfp-zoom-in">test</button> <div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Congradulations </div> 

Answer 1

You can simulate a click on an element and trigger all the corresponding events with .click() .

 function caller() { $('#clickMe').click(); }; var theControl = $("#test-popup"); $('#clickMe').magnificPopup({ items: { src: theControl, }, type: 'inline', mainClass: 'mfp-zoom-in mfp-with-anim', // 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: } }); 

 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; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" /> <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> <input type="button" value="go" onclick=" caller();"> <button id="clickMe" data-effect="mfp-zoom-in">test</button> <div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Congradulations </div>