Title: [Plugin: SimpleModal Login] Effects Last modified: August 19, 2016 --- # [Plugin: SimpleModal Login] Effects * [isaak-wells](https://wordpress.org/support/users/isaak-wells/) * (@isaak-wells) * [16 years, 1 month ago](https://wordpress.org/support/topic/plugin-simplemodal-login-effects/) * I downloaded this plugin and it is great. I was just wondering if I can put is some fade effects or something for when the box pops up? How would I go about doing this? * You can see it in use at, [http://www.consolealliance.com](http://www.consolealliance.com) * [http://wordpress.org/extend/plugins/simplemodal-login/](http://wordpress.org/extend/plugins/simplemodal-login/) Viewing 8 replies - 1 through 8 (of 8 total) * [Eric](https://wordpress.org/support/users/emartin24/) * (@emartin24) * [16 years, 1 month ago](https://wordpress.org/support/topic/plugin-simplemodal-login-effects/#post-1483272) * You’d need to modify the JS file and add an onOpen callback to the $.modal(); function call. * Example: * ``` $('#simplemodal-login-form').modal({ overlayId: 'simplemodal-login-overlay', containerId: 'simplemodal-login-container', opacity:85, onOpen: SimpleModalLogin.open, onShow: SimpleModalLogin.show, position: ['15%',] }); ``` * Then, after the show: function, add the open function: * ``` open: function (dialog) { // your effects go here. Random example below dialog.overlay.fadeIn('slow', function () { dialog.data.hide(); dialog.container.fadeIn('slow', function () { dialog.data.slideDown('slow'); }); }); }, ``` * HTH * Thread Starter [isaak-wells](https://wordpress.org/support/users/isaak-wells/) * (@isaak-wells) * [15 years, 10 months ago](https://wordpress.org/support/topic/plugin-simplemodal-login-effects/#post-1483345) * I think I may be coding this wrong since I am new at JS * Are you saying right after * ``` show: function (obj) { var dialog = this, form = $('#loginform', obj.data[0]); ``` * I paste in your example and that’s it or am I missing another step? * Thread Starter [isaak-wells](https://wordpress.org/support/users/isaak-wells/) * (@isaak-wells) * [15 years, 10 months ago](https://wordpress.org/support/topic/plugin-simplemodal-login-effects/#post-1483346) * Basically I would like these effects on my default * Opening * ``` // Opening animations $("#sample").modal({onOpen: function (dialog) { dialog.overlay.fadeIn('slow', function () { dialog.data.hide(); dialog.container.fadeIn('slow', function () { dialog.data.slideDown('slow'); }); }); }}); ``` * Closing * ``` // Closing animations $("#sample").modal({onClose: function (dialog) { dialog.data.fadeOut('slow', function () { dialog.container.hide('slow', function () { dialog.overlay.slideUp('slow', function () { $.modal.close(); }); }); }); }}); ``` * I found these on your site under examples of simple modal, If you can help me fisgure this out I would most appreciate it, Thanks. * Thread Starter [isaak-wells](https://wordpress.org/support/users/isaak-wells/) * (@isaak-wells) * [15 years, 10 months ago](https://wordpress.org/support/topic/plugin-simplemodal-login-effects/#post-1483347) * Well I figured out the opening effects * I edited the default js to look like this * ``` $('#simplemodal-login-form').modal({ overlayId: 'simplemodal-login-overlay', containerId: 'simplemodal-login-container', opacity:75, onOpen: SimpleModalLogin.open, onShow: SimpleModalLogin.show, position: ['15%',] }); }); }, open: function (dialog) { // your effects go here. Random example below dialog.overlay.fadeIn('slow', function () { dialog.data.hide(); dialog.container.fadeIn('slow', function () { dialog.data.slideDown('slow'); }); }); }, ``` * Now I am just having trouble with the closing effects. I would think it would be just adding an onClose but I guess I am not doing it right? * [Eric](https://wordpress.org/support/users/emartin24/) * (@emartin24) * [15 years, 9 months ago](https://wordpress.org/support/topic/plugin-simplemodal-login-effects/#post-1483351) * Hey Issak, * Sorry for missing your comments. You should be able to add a close function tot he SimpleModalLogin object and then add onClose: SimpleModalLogin.close to the modal options. * If you’d like to send me a link or your code, I can take a look. * -Eric * Thread Starter [isaak-wells](https://wordpress.org/support/users/isaak-wells/) * (@isaak-wells) * [15 years, 9 months ago](https://wordpress.org/support/topic/plugin-simplemodal-login-effects/#post-1483352) * I am not sure which code to send your way, The js? If so i provided a link below, * [http://www.consolealliance.com/wp-content/uploads/2010/08/default.js](http://www.consolealliance.com/wp-content/uploads/2010/08/default.js) thanks in advance. * [ezhil](https://wordpress.org/support/users/ezhil/) * (@ezhil) * [15 years, 9 months ago](https://wordpress.org/support/topic/plugin-simplemodal-login-effects/#post-1483353) * Hi isaak You site is awesome and your customizationa of the plugin is too good [http://www.consolealliance.com/wp-login.php?action=register](http://www.consolealliance.com/wp-login.php?action=register) can you make it open source so that its usefull o every one.. * [Huroman](https://wordpress.org/support/users/huroman/) * (@huroman) * [15 years, 8 months ago](https://wordpress.org/support/topic/plugin-simplemodal-login-effects/#post-1483363) * Isaak looks like got what he wants from here, by the way. [@ezhil](https://wordpress.org/support/users/ezhil/), he used [http://simple-press.com/](http://simple-press.com/). Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘[Plugin: SimpleModal Login] Effects’ is closed to new replies. * 8 replies * 4 participants * Last reply from: [Huroman](https://wordpress.org/support/users/huroman/) * Last activity: [15 years, 8 months ago](https://wordpress.org/support/topic/plugin-simplemodal-login-effects/#post-1483363) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics