DimitarChristoff/Modal — Issue #3: I have to add an method to open the modal window with a click
Author: ebarchiesi
Created: 2012-03-06 22:24:01+00:00
State: open

I need to add a method to enable open a window with javascript.
This is the code
It´s added to the Modal.BootStrap class
//----------------------------------------------------------------------------------------------------
openWindow: function ( props ) {
var self = this;
// store local options as they override the class options, more than 1 instance can exist
// and can behave differently. see .show which stores the passed options.
var options = Object.clone(this.options);
// overlay?
if (props.modalOverlay) {
options.overlay = !! JSON.decode(props.modalOverlay);
}
// any click closes on modal
if (props.modalEasyClose) {
options.anyClose = !! JSON.decode(props.modalEasyClose);
}
// allow close by pressing ESC key
if (props.modalEscClose) {
options.escClose = !! JSON.decode(props.modalEscClose);
}
// custom events
if (this.boundOpenEvent) this.removeEvent("show", this.boundOpenEvent);
if (this.boundCloseEvent) this.removeEvent("hide", this.boundCloseEvent);

if (props.modalOpenEvent) {
// open
this.boundOpenEvent = this.boundOpenEvent || this.fireEvent.bind(this, props.modalOpenEvent);
this.addEvent("show", this.boundOpenEvent);
}

if (props.modalCloseEvent) {
// close
this.boundCloseEvent = this.boundCloseEvent || this.fireEvent.bind(this, props.modalCloseEvent);
this.addEvent("hide", this.boundCloseEvent);
}

if (props.modalCustomClass) {
// add and remove class on show/hide, eg, .autoWidth as per demo.
options.openClass = props.modalCustomClass;
}

// set the title of the modal
if(!props.modalTitle) props.modalTitle='';
this.setTitle(this.getData(props.modalTitle));

// have we got modal buttons behaviour attached by data
if (props.modalButtons) {
var buttons = JSON.decode(props.modalButtons);
if (buttons && buttons.length) {
this.setFooter("");
// wrap it in this
var holder = new Element(this.options.buttonsZen);

Array.each(buttons, function (obj) {
var button = new Element("button", {
"class": obj.className,
html: obj.text
}).inject(holder).addClass(self.options.transitionClass);

if (obj.event) {
button.addEvent("click", function (event) {
self.fireEvent(obj.event);
})
}
});

holder.inject(this.footer);
}

} else {
// else, look for a normal footer prop
if(!props.modalFooter) props.modalFooter='';
this.setFooter(this.getData(props.modalFooter));
}

// save instance options
this.handledOptions[this.getId()] = options;

// what content to get, element or ajax are suported for now.
var val = props.modalBody || props.href;
switch (props.modalType) {
case "ajax":
new Request({
method: "get",
url: val,
onRequest: function () {
// spinner or text, whatever.
// self.setBody(self.options.loadingContent);
// self.show(options);
},
onSuccess: function () {
// set the body
self.setBody(this.response.text).show(options, this);
},
onFailure: function () {
self.setBody("Contents did not load. Close and try again").show(options, el);
}
}).send();
break;
default:
// get data from the href property as element directly
this.setBody(this.getData(val, !! props.href || !! props.modalBody));
this.show(options, el);
break;
}
},

You can call it with

var bootstrap = null;
window.addEvent('domready', function() {
bootstrap = new Modal.BootStrap(document.body, {
onConfirm: function() {
this.hide();
},
onCancel: function() {
this.hide();
}
});

});//]]>

and call with
bootstrap.openWindow({ href: "contacto/asesor-tecnico.html",	modalType: "ajax", modalTitle: "Contacto" ,modalFooter:'modalFooter' })

I hope this hyelp someone