Показывать сообщение подтверждения перед закрытием модального режима, если тип входного файла имеет значение (Bootstrap4) - PullRequest
Новая
       5

Показывать сообщение подтверждения перед закрытием модального режима, если тип входного файла имеет значение (Bootstrap4)

0 голосов
/ 09 апреля 2020

Привет, ребята. Как вы? Я работаю сейчас над проектом и хочу создать простой трюк. если у файла типа ввода есть значение, показать сообщение с подтверждением да или нет перед закрытием модального режима Примечание: если пользователь выберет да, закройте модальное окно с очищенным значением ввода

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 Ответ

0 голосов
/ 09 апреля 2020

Я не нашел никакой кнопки закрытия в вашем модале, поэтому я использовал модал по умолчанию bootstrap, вот мой фрагмент, поэтому загрузите какой-нибудь файл, затем попробуйте отправить форму, чтобы увидеть действие: 

<!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/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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...