亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如果輸入文件類型有值,則在關閉模式之前顯示確認消息(Bootstrap4)

如果輸入文件類型有值,則在關閉模式之前顯示確認消息(Bootstrap4)

慕婉清6462132 2023-12-04 17:19:24
大家好,你們好嗎,我現在正在開發一個項目,我想創建一個簡單的技巧。 如果輸入類型文件有值,則在關閉模式之前顯示帶有“是”或“否”的確認消息 注意:如果用戶選擇“是”,則關閉模式并清除輸入值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">&times;</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/[email protected]/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>


查看完整回答
反對 回復 2023-12-04
  • 1 回答
  • 0 關注
  • 150 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號