大家好，你們好嗎，我現在正在開發一個項目，我想創建一個簡單的技巧。我編寫了一個簡單的 jQuery 代碼，但它仍然無法按我想要的方式工作。故事說：如果輸入類型文件有一個值，則在關閉模式之前顯示帶有“是”或“否”的確認消息， 因此如果用戶想要離開頁面并關閉模式對話框，則應該顯示一條確認消息，說明他是否確定要關閉模式對話框....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="ID12"> Upload Now </label> </div></div></div></div></div>JS代碼：$(document).ready(function() { $(document).on('hidden.bs.modal', '#modal_a', function (e) { $('#ID12').on('change', function(e){ const FileLength = $(this)[0].files.length; if(FileLength > 0){ const ConfirmMessage = confirm("Are you sure?"); if(ConfirmMessage){ $("#ID12").val(''); } } }); });});
2 回答
慕神8447489
TA貢獻1780條經驗 獲得超1個贊
基本上，下面的代碼檢查輸入中是否存在文件......
如果文件存在，則會發出確認消息。
如果用戶因為不確定是否要提交上傳而取消，則模式將不會關閉。
但如果上傳文件從未存在于上傳輸入中，則模式將照常關閉:-)
慕哥6287543
TA貢獻1831條經驗 獲得超10個贊
// launch the example modal
$('#test-modal').modal('show');
// check for changes on input and force value
$('#test-upload').on('change', function() {
// force the value in the dom
$(this).attr('value', $(this).val());
});
// lets run the confirm checks on hide
$(document).on('hide.bs.modal', '#test-modal', function(e) {
// if upload value is not empty/specified
if ($('#test-upload').val() != '') {
// confirm your sure about cancelling upload
var uploadSure = confirm("You sure you want to cancel your upload?");
// confirm checks
if (!uploadSure) {
// stop modal closing
e.preventDefault();
} else {
// continue closing/hiding modal
}
}
});
<div class="modal fade" id="test-modal">
<div class="modal-dialog modal-dialog-scrollable">
<form class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Upload Confirmation</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="file" class="form-control-file" id="test-upload">
</div>
</div>
</form>
</div>
</div>
<div class="container mt-3">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#test-modal">
Launch Modal
</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
- 2 回答
- 0 關注
- 342 瀏覽
添加回答
舉報
0/150
提交
取消