Buen día.
Mi caso es el siguiente:
Tengo varias paginas asp previamente existentes no desarrolladas por mi.
Estas paginas tienen controles variados para ejecutar consultas o generación de archivos PDF.
Entonces lo que necesito es (adjunto diagrama secuencia como referencia ), que al momento que un usuario haga clic en algún control (botón, enlace); de alguna pagina, se genere una ventana modal con controles de autorización en los cuales el usuario debe validar sus huellas digitales, para ser validadas contra las almacenadas, si el usuario posee permisos, la ejecución que ya existía del botón debe continuar, de lo contrario, mantener la ventana modal.
he capturado ya el evento clic del botón, y genero la ventana modal de manera dinámica ( funcionalidad adjunta).
Tengo dos preguntas:
Es posible hacer lo que planteo, ejecutar otra funcionalidad previa a la del botón ?
La ventana modal se genera al momento de capturar el evento clic, pero; aunque esta generada en el codigo HTML, no es visible. porque es esto ?
var BstrapModal = function (title, body, buttons) {
var title = title || "Lorem Ipsum History", body = body ||
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. ", buttons = buttons || [{ Value: "CLOSE",
Css: "btn-primary", Callback: function (event) { BstrapModal.Close(); }
}];
var GetModalStructure = function () {
var that = this;
that.Id = BstrapModal.Id = Math.random();
var buttonshtml = "";
for (var i = 0; i < buttons.length; i++) {
buttonshtml += "<button type='button' class='btn " +
(buttons[i].Css || "") + "' name='btn" + that.Id +
"'>" + (buttons[i].Value || "CLOSE") +
"</button>";
}
return "<div class='modal fade' name='dynamiccustommodal' id = '" + that.Id + "' tabindex = '-1' role = 'dialog' data - backdrop='static' data - keyboard='false' aria - labelledby='" +
that.Id + "Label'><div class='modal-dialog'> < div class='modal-content' > <div class='modal-header'> <button type='button' class='close modal-white-close' onclick='BstrapModal.Close()'><span aria-hidden='true'>× </span></button><h4 class='modal-title'>" + title +
"</h4></div> <div class='modal-body'> <div class='row'><div class='col-xs-12 col-md-12 col-sm-12 col-lg-12'>" +
body + "</div></div></div> <div class='modal-footer bg-default'> <div class='col-xs-12 col-sm-12 col-lg-12'>" + buttonshtml +
"</div></div></div ></div ></div > ";
}();
BstrapModal.Delete = function () {
var modals = document.getElementsByName("dynamiccustommodal");
if (modals.length > 0) document.body.removeChild(modals[0]);
};
BstrapModal.Close = function () {
$(document.getElementById(BstrapModal.Id)).modal('hide');
BstrapModal.Delete();
};
this.Show = function () {
debugger;
BstrapModal.Delete();
document.body.appendChild($(GetModalStructure)[0]);
var btns = document.querySelectorAll("button[name='btn" + BstrapModal.Id + "']");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", buttons[i].Callback || BstrapModal.Close);
}
$(document.getElementById(BstrapModal.Id)).modal('show');
};
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script>
function myFunction() {
debugger;
new BstrapModal().Show();
}
</script>
<button onclick="myFunction()">click</button>
Podrían por favor darme una guía ...Agradezco su apoyo ...