时间戳

首页 > 解决方案 > 使用 Modal BS4 替换删除文件提示确认

modal-dialog - 使用 Modal BS4 替换删除文件提示确认

问题描述

我尝试使用以下代码通过引导程序的模态确认来更改 dropzone 的 pront 确认：

模态：

<div class="modal inmodal fade" id="RemoveFileModal" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content animated bounceInRight">
                        <div class="modal-header errormdg">
                            <button type="button" class="close" data-dismiss="modal"><i class="fas fa-window-close text-white"></i><span class="sr-only">Close</span></button>
                            <h4 class="modal-title">Cuidado: Estas Intentando Remover un Archivo.</h4>
                        </div>
                        <div class="modal-body">
                            <p>
                                Por algún motivo el sistema detecto que intentaste Remover un Archivo, Ten en cuenta que el archivo removido no podrás subirlo al sistema.<br> Este aviso es para que tengas en cuenta que si aceptas el archivo que remueves no será guardado en la Aplicación.<br><br>
                                Presiona Aceptar para Remover el archivo y Salir de la pantalla.<br>
                                Presiona Cancelar para Regresar.<br>
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-cls-error" id="outAceptar" data-dismiss="modal">Aceptar</button>
                            <button type="button" class="btn btn-white" data-dismiss="modal">Cancelar</button>
                        </div>
                    </div>
                </div>
            </div>

并使用此脚本用于 dropzone 来捕获删除文件事件并显示模式：

 $('div.dropzone').each(function() {
            $(this).dropzone({
                autoProcessQueue: true,
                url: "/",
                maxFilesize: window.SIS.uploadFiles.size,
                maxFiles: window.SIS.uploadFiles.max,
                acceptedFiles: 'application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                dictDefaultMessage: "<strong>Coloque los archivos Aqui. </strong></br> (Peso Maximo 2Mb, Se Aceptan los Siguientes Formatos: jpg, pdf, xls, xlsx.)",
                addRemoveLinks: true,
                dictCancelUpload: 'Cancelar Subida',
                dictRemoveFile: 'Quitar Archivo',
                clickable: true,
                init: function() {
                    this.on("removedfile", function(data) {
                        var IsRemove = false;
                        $('#RemoveFileModal').modal('toggle').on('click', '#outAceptar', function(e) {
                            IsRemove = true;
                        });
                        return IsRemove;
                    });
                },
            });
        });

主要问题是，如果用户单击“aceptar”或“cancelar”，togle modal 不会停止要捕获的删除文件事件。接受和取消的西班牙语选项。

该脚本显示模态但继续在后台删除文件。

更新

我试过这个但不工作：

removedfile: function(file) {
                $('#RemoveFileModal').modal('toggle').on('click', '#outAceptar', function(e) {
                    //myDropzone.removeFile(file);
                    return true;
                });
                $('#RemoveFileModal').modal('toggle').on('click', '#outCancelar', function(e) {
                    return false;
                });
            },

标签： modal-dialogdropzone.js

解决方案

使用删除文件事件是一个好方法：

// Called whenever a file is removed.
removedfile: function removedfile(file) {
            $('#yourModalId').modal({
                backdrop: 'static',
                keyboard: false
            })

            $('#yourModalDeleteButton').click({file: file, self: this}, removeFile);

            function removeFile(event)
            {
                $('#yourModalId').modal('hide');
                // user confirmed , remove your file
            }
        },

如您所见，我正在将文件对象和this传递给我的函数，因为您至少需要文件对象来删除文件。（也许这不是这取决于您如何处理文件删除）。

推荐阅读