Откройте модальный Bootstrap в соответствии с выбором пользователя при нажатии на радио кнопку - PullRequest
Новая
       17

Откройте модальный Bootstrap в соответствии с выбором пользователя при нажатии на радио кнопку

0 голосов
/ 09 марта 2020

Я занимаюсь разработкой Flask веб-приложения, и мне нужно настроить сценарий с bootstrap модальностями. Мне нужно открыть модал в соответствии с переключателем, который проверил мой пользователь. Мой пользователь проверит радио-кнопку, затем щелкнет «ОК», и мне нужен определенный модал, чтобы выскочить Как я могу справиться с этим? Я использовал data-target на данный момент.

Мой html код: 

<div class="container">
  <!-- Modal -->
  <div class="modal fade" id="modalchoix" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Souhaitez-vous mettre à jour :</h4>
        </div>

                <div class="modal-body">
                    <input type="radio" id="referentiel" name="choixmaj" value="referentiel">
                    <label for="referentiel"> CHOIX A</label><br>

                    <input type="radio" id="transco" name="choixmaj" value="transco">
                    <label for="transco"> CHOIX B</label><br>

                </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>     
          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalrefmodeles">OK</button>
        </div>

      </div>

    </div>
  </div>

</div>

Спасибо

Ответы [ 2 ]

0 голосов
/ 09 марта 2020

С помощью приведенного ниже кода вы сможете переключать модальные в зависимости от значения переключателя. Это будет полностью динамически c, даже идентификаторы модалей являются динамически c. Конечно, если вы хорошо знаете Jquery, вы можете заняться чем-то еще.

По умолчанию я удалил id из модального режима и установил его динамически c с каждым кликом.

На данный момент этот код работает с щелчком переключателя. Вы можете сделать это и с помощью другой кнопки.

В этой ситуации модальный режим только один, но вы можете установить его по-разному для каждого значения переключателя перед появлением модального параметра. И вы можете установить его в соответствии с вашими потребностями. 

$('input[type=radio]').on('click', function() {

    var val = $(this, ':checked').val();
    $('div.modal.fade').attr('id', val);
    $('#' + val).find('.modal-body').text(val);
    $('#' + val).modal('show');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<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>

<div class="container">
  <!-- Modal -->
  <div class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Souhaitez-vous mettre à jour :</h4>
        </div>

        <div class="modal-body">
          Hello

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-default">OK</button>
        </div>

      </div>

    </div>
  </div>

  <input type="radio" id="referentiel" name="choixmaj" value="referentiel">
  <label for="referentiel"> CHOIX A</label><br>

  <input type="radio" id="transco" name="choixmaj" value="transco">
  <label for="transco"> CHOIX B</label><br>
</div>
0 голосов
/ 09 марта 2020

Вы можете сделать это с помощью Javascript.

Здесь у меня есть два мода, с разными id's.

Первый идентификатор режима - yesModal, а второй идентификатор - noModal.

Всякий раз, когда вы меняете радио, JS переключает цель данных с yesModal на noModal и наоборот. 

document.querySelectorAll('input[name="radio"]').forEach(cur => {
    cur.addEventListener('change', e => {
        const value = document.querySelector('input[name="radio"]:checked').value;
        if (value === 'yes') {
            document.querySelector('#reactAccRadio').setAttribute('data-target', '#yesModal');
        } else if (value === 'no') {
            document.querySelector('#reactAccRadio').setAttribute('data-target', '#noModal');
        }
    })
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<form id="formSubmit" action="#" method="POST">
    <div class="form-group">
        <input type="radio" name="radio" value="yes" checked> Open Yes Modal
        <input type="radio" name="radio" value="no"> Open No Modal
    </div>
    <button id="reactAccRadio" type="button" class="btn btn-primary" data-toggle="modal" data-target="#yesModal">Submit</button>
</form>

<!-- Modal -->
<div class="modal fade" id="yesModal" 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">If yes</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </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>

<!-- Modal -->
<div class="modal fade" id="noModal" 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">If no</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </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>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
...