[Plugin: SimpleModal Login] Effects

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

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?

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.

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?

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

I am not sure which code to send your way, The js? If so i provided a link below,

https://www.consolealliance.com/wp-content/uploads/2010/08/default.js
thanks in advance.

Hi isaak
You site is awesome and your customizationa of the plugin is too good https://www.consolealliance.com/wp-login.php?action=register can you make it open source so that its usefull o every one..

Isaak looks like got what he wants from here, by the way. @ezhil, he used https://simple-press.com/.