Morphing Buttons Concept

here is the joomla 3 modul integrated multi-pushmenu with 3d-transform and the morphing button for login/out – on github:
https://github.com/HyperKat/ws-navigator_0.5

You ‘ve been great inspiration.

About modals that contain buttons (submit, subscribe, etc.):
The modal can be closed automatically, right after the button is clicked or after 3 secs – assuming that a success/information message will be displayed in the meanwhile. We also want to keep the default functionality of Close-Icon.
To do so, go to uiMorphingButton.js and add some code to UIMorphingButton.prototype._initEvents function.
This is how it looks like mine..

CASE 1

UIMorphingButton.prototype._initEvents = function() {
var self = this;
// open
this.button.addEventListener(‘click’, function() {
self.toggle();
});

// close
if (this.options.closeEl !== ”) {
var closeEl = this.el.querySelector(this.options.closeEl);

if (closeEl) {
closeEl.addEventListener(‘click’, function() {
self.toggle();
});
}
}
//Here is the addition.
//If you have a submit button give it an id in the html code.
//like this:
//and the following code will make the modal close 2 secs after you click the button
var sbId = this.el.querySelector(‘#submit_button_id’);
if (sbId) {
sbId.addEventListener( ‘click’, function() {
setTimeout(function() {
self.toggle();
}, 2000);
} );
}
};

________________________________________________________

CASE 2

UIMorphingButton.prototype._initEvents = function() {
var self = this;
// open
this.button.addEventListener(‘click’, function() {
self.toggle();
});

// close
if (this.options.closeEl !== ”) {
var closeEl = this.el.querySelector(this.options.closeEl);

if (closeEl) {
closeEl.addEventListener(‘click’, function() {
self.toggle();
});
}
}
//Here is the addition.
//I have again a submit button, I will give it an id in the html code.
//like this:
//I also have an in-modal success message being displayed when the form submission is successful.
//The success message is written in a div that waits with diplay:none. When the form is submitted successfully, the div gets diplay:block.
//the div has id=”success”
//and the following code does: after the button is clicked, we take a look if the is displayed.
//If it is, then the modal will close automatically after 4 secs.
var sbId = this.el.querySelector(‘#submit_button_id’);
if (sbId) {
sbId.addEventListener( ‘click’, function() {
setTimeout(function() {
var isVisible = $(‘#success’).is(‘:visible’);
if (isVisible){self.toggle();}
}, 4000);
} );
}
};

Thanx!

Chris, as closing the direct modal in console?
Thanks Chris!