Este tutorial aborda la creación de un modal de confirmación personalizado en JavaScript. Este es un mensaje de confirmación dinámico que le permite a su usuario confirmar primero antes de ejecutar la función JS. Crear Modal de Confirmacion en JavaScript se puede usar para alguna acción o función en sus proyectos de aplicaciones web actuales o futuros, como operaciones de eliminación. La función de confirmación antes de ejecutar una acción en una aplicación web puede ayudar a su usuario a evitar la ejecución involuntaria de la acción.
DESCARGAR TODO EL CODIGO FUENTE
Aquí, proporcionaré una aplicación que explica el objetivo principal de este tutorial. En la aplicación, la confirmación tiene 3 opciones que son ejecutar la función, ejecutar la función con un solo parámetro y ejecutar una función con múltiples parámetros. Antes de continuar con la parte de codificación, asegúrese de que su dispositivo esté conectado a Internet debido a que el código fuente usa CDN para las bibliotecas externas.
Crear interfaz principal
En su editor de texto preferido, cree un nuevo archivo HTML con el nombre index.html. Este archivo contiene el script de los elementos que genera una página simple con 4 botones diferentes y un elemento modal. Dado que estamos creando un modal dinámico de confirmación, solo necesitaremos 1 contenedor modal de confirmación.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal de Confirmacion Personalizado en JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="./script.js"></script>
</head>
<body>
<div class="container py-5">
<h3 class="text-center">Modal de Confirmacion Personalizado en JavaScript</h3>
<hr>
<div class="text-center">
<div class="row row-cols-xl-6 row-cols-md-4 row-col-xs-2 justify-content-center gx-2 gy-3">
<button class="btn btn-primary bg-gradient-primary mx-2 my-3" type="button" id="action1">Modal 1</button>
<button class="btn btn-light bg-gradient-light border mx-2 my-3" type="button" id="action2">Modal 2</button>
<button class="btn btn-info bg-gradient-info mx-2 my-3" type="button" id="action3">Modal con un Parametro</button>
<button class="btn btn-warning bg-gradient-warning mx-2 my-3" type="button" id="action4">Modal con Multiples Parametros</button>
</div>
</div>
</div>
<div class="modal fade" id="confirm_modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered rounded-0">
<div class="modal-content rounded-0">
<div class="modal-header py-1">
<h5 class="modal-title">Confirmacion</h5>
</div>
<div class="modal-body">
</div>
<div class="modal-footer py-1">
<button type="button" class="btn btn-primary btn-sm rounded-0 py-1" id="confirm-btn">Confirmar</button>
<button type="button" class="btn btn-secondary btn-sm rounded-0 py-1" data-bs-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="action_display" tabindex="-1">
<div class="modal-dialog modal-dialog-centered rounded-0">
<div class="modal-content rounded-0">
<div class="modal-header py-1">
<h5 class="modal-title">Action Result</h5>
</div>
<div class="modal-body">
</div>
<div class="modal-footer py-1">
<button type="button" class="btn btn-secondary btn-sm rounded-0 py-1" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
Crear la acción principal
A continuación se muestra el código JavaScript que contiene los scripts que hacen posible nuestro objetivo en este tutorial. Cree un nuevo archivo con el nombre script.js y copie y pegue el código fuente a continuación.
function action1() {
var result = "Action 1 has been clicked";
var action_display = $('#action_display')
action_display.find('.modal-body').html(result)
action_display.modal('show')
}
function action2() {
var result = "Action 2 has been clicked";
var action_display = $('#action_display')
action_display.find('.modal-body').html(result)
action_display.modal('show')
}
function action3($param1 = '') {
var result = "Action 3 has been clicked. Parameter = " + $param1;
var action_display = $('#action_display')
action_display.find('.modal-body').html(result)
action_display.modal('show')
}
function action4($param1 = '', $param2 = '') {
var result = "Action 1 has been clicked. parameter 1 = \'" + $param1 + "\', parameter 2 = \'" + $param2 + "\'";
var action_display = $('#action_display')
action_display.find('.modal-body').html(result)
action_display.modal('show')
}
window._confirm = function($message = '', $func = '', $param = []) {
if ($func != '' && typeof window[$func] == 'function') {
var modal_el = $('#confirm_modal')
modal_el.find('.modal-body').html($message)
modal_el.modal('show')
modal_el.find('#confirm-btn').click(function(e) {
e.preventDefault()
if ($param.length > 0 && !!$.isArray($param))
window[$func].apply(this, $param)
else
window[$func]($param)
modal_el.modal('hide')
})
} else {
alert("Function does not exists.")
}
}
$(function() {
$("#action1").click(function() {
_confirm("Desea Seguir?", 'action1')
})
$("#action2").click(function() {
_confirm("Desea Seguir?", 'Modal 2')
})
$("#action3").click(function() {
_confirm("Desea Seguir?", 'action3', 'Single Parameter')
})
$("#action4").click(function() {
_confirm("Desea Seguir?", 'action4', ['Hello World!', "SourceCodester"])
})
})
DESCARGAR TODO EL CODIGO FUENTE y BASE DE DATOS
