Viewing 8 replies - 1 through 8 (of 8 total)
  • 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

    (@isaak-wells)

    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

    (@isaak-wells)

    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

    (@isaak-wells)

    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

    Thread Starter isaak-wells

    (@isaak-wells)

    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
    thanks in advance.

    Hi isaak
    You site is awesome and your customizationa of the plugin is too good http://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 http://simple-press.com/.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Plugin: SimpleModal Login] Effects’ is closed to new replies.