You need to add something like this. Can be added to your themes js, added to the footer via hooks, or added to the modals content using the <script></script>
<script>
jQuery('#eModal-6 button').click(function(e){
jQuery('#eModal-6').emodal('close');
});
</script>
Thank you so much! Since I need to do the same thing with 7 different modals, it sounds like it would make the most sense to add it to the modals content…. I’m not very familiar with jquery — could you tell me where in the content to add it? Thank you!
If they are all identical content you could do one script and place it in your themes footer.php below <?php wp_footer(); ?>
<script>
jQuery(document).ready(function () {
jQuery('#eModal-1, #eModal-2, #eModal-3, #eModal-4, #eModal-5, #eModal-6').find('button, .button').click(function (e) {
jQuery(this).parents('.emodal').emodal('close');
});
});
</script>
Of course adjust the ids as needed, and if you have any other buttons in the modal they will trigger it as well unless we target them more specifically in the .find(”) parameter. There you can specify a css class .find('.myclass'), ids .find('#mybutton'), elements.find(‘div’)or even combinations to specify say a button with a certain class.find(‘button.myclass’)`
There are way more selectors possible but it depends on your modals content and the buttons html. You can learn more here
UPDATE:
I figured out that I needed to add the correct selector name at .find('button, .button')
so it is now
.find('button, .button, .my_button')
and it is working!!
Thanks again!!!
=====================
So, I’m trying to use this in the child theme’s footer.php… don’t seem to have it working yet… here’s the last part of the footer.php file.
<?php wp_footer(); ?>
<!-- Close eModal window with Accept button click |SJ_20140830| -->
<script>
jQuery(document).ready(function () {
jQuery('#eModal-1, #eModal-2, #eModal-3, #eModal-4, #eModal-5, #eModal-6, #eModal-7, #eModal-8, #eModal-9').find('button, .button').click(function (e) {
jQuery(this).parents('.emodal').emodal('close');
});
});
</script>
<?php
if( $udesign_options['enable_cufon'] ) : ?>
<script type="text/javascript"> Cufon.now(); </script>
<?php
endif; ?>
<?php udesign_body_bottom(); ?>
</body>
</html>
What might I be doing wrong?
Hey siriusly, welcome to the wonderful world of jQuery and Javascript :).
In reality you can shorten your find to simply .find('.my_button'). You can be as broad or as specific as you need to be with jQuery selectors. For example i can select all images, all images with class .image, every other image with the class .image, or just the 5th one inside main content.
Awesome. Thanks! Wasn’t sure if the other selectors were important, so I left them in. 😉 Been digging into the tutorials, and I have to say, it’s great to begin getting a handle on something that has been lurking in the background as “mysterious” until now. Thanks again for a great plugin, and for the great support! BTW… here’s the page http://bit.ly/1B8XGIF
Hey, just tried your test page. the button isnt working. You need to change your footer script to match the output of your button.
Your button has a class of flat-custom-button
So your .find() needs to be .find('.flat-custom-button')
Replace your script with this and you should be 100% fine for future as well.
<script>
jQuery(document).ready(function () {
jQuery('#eModal-1, #eModal-2, #eModal-3, #eModal-4, #eModal-5, #eModal-6, #eModal-7, #eModal-8, #eModal-9').find('.flat-custom-button').click(function (e) {
e.preventDefault();
jQuery(this).parents('.emodal').emodal('close');
});
});
</script>
NP. Please take a moment to rate and review the plugin and or support. http://ww.wp.xz.cn/support/view/plugin-reviews/easy-modal
