大家好，你们好吗，我现在正在开发一个项目，我想创建一个简单的技巧。 如果输入类型文件有值，则在关闭模式之前显示带有“是”或“否”的确认消息 注意：如果用户选择“是”，则关闭模式并清除输入值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 });});
1 回答
qq_花开花谢_0
TA贡献1835条经验 获得超7个赞
我在模态中没有找到任何关闭按钮，这就是我使用默认引导模态的原因，这是我的代码片段，因此上传一些文件，然后尝试提交表单以查看操作：
<!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>
- 1 回答
- 0 关注
- 99 浏览
添加回答
举报
0/150
提交
取消