Как скрыть элемент при нажатии на кнопку?

145

10 мая 2019, 15:20

Версия Bootstrap: Bootstrap 4.

На сайте располагается блок с тестированием.

Тестирование состоит из отдельных кейсов, а сам кейс из четырех элементов:

Текст
Кнопка "Верно"
Кнопка "Неверно"
Картинка

При нажатии на кнопки "Верно" или "Неверно" всплывает pop-up окно с обратной связью. В этом pop-up окне есть кнопка "Продолжить".

Что нужно сделать?

Нужно, чтобы при нажатии на эту кнопку, блок с кейсом (текст+кнопки "Верно" и "Неверно" + картинка) становился недоступным.

Например, возникла бы затемняющая плашка (поверх кейса), которая не позволит вновь выбрать ответ, или сам кейс пропадает плавной анимацией и пользователь переходит к следующему.

Как это можно реализовать?

Пример моего кода:

p { 
  font-size: 18px; 
  color: #434343; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
<link href="style_main.css" rel="stylesheet" type="text/css"> 
</head> 
<div class="container mt-5"> 
  <div class="row"> 
    <div id="case-1" class="col-6 mt-3"> 
      <p>Имя: Петрова Ирина Васильевна<br> Дата рождения: 18.01.1990<br> Место регистрации: г. Екатеринбург<br> 
        <br> 
        <br> Описание: автомобиль Skoda Fabia, 2011 года выпуска<br> Сумма кредита: 480 000 рублей<br> 
        <br> 
        <br> Срок: 9 месяцев 
      </p> 
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> 
                            Подходит 
                           </button> 
      <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> 
        <div class="modal-dialog modal-dialog-centered" role="document"> 
          <div class="modal-content"> 
            <div class="modal-header"> 
              <h5 class="modal-title" id="exampleModalLongTitle">Неверно!</h5> 
            </div> 
            <div class="modal-body"> 
              Клиент не подходит, потому что... 
            </div> 
            <div class="modal-footer"> 
              <button type="button" class="btn btn-secondary" data-dismiss="modal" onClick="">Понятно</button> 
            </div> 
          </div> 
        </div> 
      </div> 
      <button type="button" class="btn btn-primary ml-5" data-toggle="modal" data-target="#exampleModalCenter2"> 
                            Не подходит 
                           </button> 
      <div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> 
        <div class="modal-dialog modal-dialog-centered" role="document"> 
          <div class="modal-content"> 
            <div class="modal-header"> 
              <h5 class="modal-title" id="exampleModalLongTitle2">Верно!</h5> 
            </div> 
            <div class="modal-body"> 
              Клиент не подходит, потому что... 
            </div> 
            <div class="modal-footer"> 
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Продолжить</button> 
 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="col-6"> 
      <img src="" alt="Ирина Петрова"> 
    </div> 
  </div> 
</div> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>