Como puedo lograr ejecutar la acción asignada por cada botón Según el id de cada uno. No se si me explico.
Ej: El botón de Modal2 Button2
del Titulo del Modal 2
debe ejecutar la función action: function () {alert('Modal2 Button2');}
en lugar de eso ejecuta el ultimo ciclo que ejecuto al cargar el código al inicio que fue del botón Modal3 Button2
var jQ = false;
if (typeof $ != 'function' && jQ == false) {
window.$ = function(id) {
return document.querySelector(id);
}
}
if (jQ == false) {
Element.prototype.settings = function(settings) {
SmEl = this;
option = settings;
ct();
};
}
function ct() {
if (option.buttons != undefined) {
b = option.buttons ? option.buttons : "";
Object.keys(b).forEach(function(key, btn) {
if (b[key] != undefined) {
if (b[key] != "") {
Btns = document.createElement("BUTTON");
Btns.classList.add("Btn");
Btns.classList.add([key]);
BtnsNode = document.createTextNode(b[key].name);
Btns.appendChild(BtnsNode);
Btns.onclick = function(){
b[key].action();
};
SmEl.querySelector(".Modal-Footer").appendChild(Btns);
}
}
});
}
}
$("#Modal1").settings({
buttons: {
accept: {
name: "Modal1 Button1",
action: function () {
alert('Modal1 Button1');
}
},
cancel: {
name: "Modal1 Button2",
action: function () {
alert('Modal1 Button2');
}
},
custom: {
name: "Modal1 Button3",
action: function () {
alert('Modal1 Button3');
}
}
}
});
$("#Modal2").settings({
buttons: {
accept: {
name: "Modal2 Button1",
action: function () {
alert('Modal2 Button1');
}
},
cancel: {
name: "Modal2 Button2",
action: function () {
alert('Modal2 Button2');
}
},
custom: {
name: "Modal2 Button3",
action: function () {
alert('Modal2 Button3');
}
}
}
});
$("#Modal3").settings({
buttons: {
accept: {
name: "Modal3 Button1",
action: function () {
alert('Modal3 Button1');
}
},
cancel: {
name: "Modal3 Button2",
action: function () {
alert('Modal3 Button2');
}
},
custom: {
name: "Modal3 Button3",
action: function () {
alert('Modal3 Button3');
}
}
}
});
<div class="Modal-Container" id="Modal1">
<div class="Modal Drop">
<div class="Modal-Head">Titulo del Modal 1</div>
<div class="Modal_Body"></div>
<div class="Modal-Footer"></div>
</div>
</div>
<div class="Modal-Container" id="Modal2">
<div class="Modal Drop">
<div class="Modal-Head">Titulo del Modal 2</div>
<div class="Modal_Body"></div>
<div class="Modal-Footer"></div>
</div>
</div>
<div class="Modal-Container" id="Modal3">
<div class="Modal Drop">
<div class="Modal-Head">Titulo del Modal 3</div>
<div class="Modal_Body"></div>
<div class="Modal-Footer"></div>
</div>
</div>