如果输入文件类型有值，则在关闭模式之前显示确认消息（Bootstrap4）
大家好，你们好吗，我现在正在开发一个项目，我想创建一个简单的技巧。 如果输入类型文件有值，则在关闭模式之前显示带有“是”或“否”的确认消息 注意：如果用户选择“是”，则关闭模式并清除输入值
HTML 代码：
<div class="modal fade" id="modal_a" tabindex="-1" role="dialog" aria-labelledby="modal_aLabel" aria-hidden="true"data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="uploadavatar">
<input type="file"
class="custom-file-input"
id="ID12"
name="avatar"
value=""
hidden />
<label role="button" class="btn" for="Upload_u_avatar">
Upload Now
</label>
</div>
</div>
</div>
</div>
</div>
JS代码：
$(document).ready(function() {
$(document).on('hidden.bs.modal', '#modal_a', function (e) {
// Confirmation Here
});
});
慕婉清6462132浏览 52回答 1
1回答
-
qq_花开花谢_0
我在模态中没有找到任何关闭按钮，这就是我使用默认引导模态的原因，这是我的代码片段，因此上传一些文件，然后尝试提交表单以查看操作：<!DOCTYPE html><html><head> <title>SlutProjekt </title> <link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700%7CRaleway:400,700&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- JS files: jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script></head><style>body { /*color: white;*/ margin: 0px; padding: 0;}</style><body><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal</button><!-- Modal --><div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form action="" class="test"> <input type="file" class="custom-file-input" id="Upload_u_avatar" name="avatar" value="" hidden /> <label role="button" class="btn" for="Upload_u_avatar"> Upload File Now </label> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div></div> <!--- Second Row --><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script><script>$(function(){ $(".custom-file-input").on('change', function(e){ var vidFileLength = $(this)[0].files.length; if(vidFileLength > 0){ //There is some chosen file var confirmation = confirm("Are you sure?"); if(confirmation){ $(".custom-file-input").val(''); $("[data-dismiss=modal]").trigger({ type: "click" }); } } }) })</script></body></html>
随时随地看视频慕课网APP
相关分类
Html5