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

Тема в разделе "JavaScript", создана пользователем 1204312-4120341, 23 ноя 2018.

Метки:
  1. 1204312-4120341

    1204312-4120341

    Регистрация:
    23 ноя 2018
    Сообщения:
    0
    Симпатии:
    0
    Всем привет! Помогите, пожалуйста, решить проблему.

    Ситуация такая:

    На сайте (верстка с помощью bootstrap 4) располагается блок с тестированием.

    Тестирование состоит из отдельных кейсов, а сам кейс из четырех элементов - 1. Текст, 2. Кнопка "Верно" 3. Кнопка "Неверно" 4. Картинка

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

    В этом pop-up есть кнопка "Продолжить". Какая задача ?

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

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

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

    Приблизительный отрывок кода:


    HTML:
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
 
<title>Документ без названия</title>
 
 
 
</head>
 
 
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="style_main.css" rel="stylesheet" type="text/css">
 

 
 
 
 
    <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">Понятно</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="img/client.png" alt="Ирина Петрова">
                 
                 
                   </div>
     
     
     
     
     
        </div>
 
 
 
 
 
 
    </div>
 
 
 
 
 
 
 
 
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
 
<body>
</body>
</html>
     
    Lasted edited by : 24 ноя 2018
    1204312-4120341, 23 ноя 2018
    #1
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Приблизительный? Это как?
    Просто дайте ссылку на сайт. Если уж совсем сайт светить не хотите, то выложите весь необходимый код на https://jsfiddle.net.
     
    Dotrox, 24 ноя 2018
    #2
  3. 1204312-4120341

    1204312-4120341

    Регистрация:
    23 ноя 2018
    Сообщения:
    0
    Симпатии:
    0
    1204312-4120341, 24 ноя 2018
    #3
  4. 1204312-4120341

    1204312-4120341

    Регистрация:
    23 ноя 2018
    Сообщения:
    0
    Симпатии:
    0
    1204312-4120341, 24 ноя 2018
    #4
  5. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Вот: https://jsfiddle.net/Dotrox/u6ts0brw/3/

    Я просто добавил это:
    Код:
    $(document).on('click', '[data-dismiss="modal"]', function(){
    $('#case-1').hide();
});
    Но это только макет решения, ибо в реальных условиях нужно ещё динамически определять, какой именно блок скрывать, а для этого нужно эту информацию где-то фиксировать или как-то передавать.
     
    Dotrox, 25 ноя 2018
    #5
< Скрипт антифрод системы! Прошу помощи | Как из текста вытащить первое число? >