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

Тема в разделе "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
  2. Dotrox

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

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

    1204312-4120341

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

    1204312-4120341

    Регистрация:
    23 ноя 2018
    Сообщения:
    0
    Симпатии:
    0
  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();
    });
    Но это только макет решения, ибо в реальных условиях нужно ещё динамически определять, какой именно блок скрывать, а для этого нужно эту информацию где-то фиксировать или как-то передавать.