How can I execute the action assigned by each button According to the id of each one. I don't know if I explain myself.
Ex: The button of Modal2 Button2
del Titulo del Modal 2
must execute the function action: function () {alert('Modal2 Button2');}
instead of that it executes the last cycle that I executed when loading the code at the beginning that was of the buttonModal3 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>