Bootstrap 4 Модальный JS триггер не работает? - PullRequest
Новая
       1

Bootstrap 4 Модальный JS триггер не работает?

0 голосов
/ 28 февраля 2019

У меня есть модальное имя, и я хочу попросить пользователя пройти аутентификацию, прежде чем показывать модальное (которое переопределяет файлы сервера с модальным содержимым).

Я хочу, чтобы пользователь нажал на мою кнопку editmodal, чтобы показатьформа подключения, и если она совпадает с данными, закодированными в json base64, отображается модальное значение.

Моя проблема: я не могу отобразить мой модальный режим с любым из этих 

$('#Modal').modal();
$('#Modal').modal('toggle');
$('#Modal').modal('show');

мой код: 

<button id="buttonmodal" type="button" class="btn btn-primary"  data-target="#exampleModal">

(я удалил триггер данных, потому что хочу сделать это в js) 

<!-- 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" style="    width: 600px;
          height: 600px;">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button id="closebtn" type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form action="" name="modal-form" style="width: 100%; height:70%" method="post">
              <textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
              <div class="modal-footer">
                <button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
              </div>
              </form>
            </div>
          </div>
        </div>
      </div>

и мой js пока довольно прост: 

$('#buttonmodal').click(function() {
debugger;
 var text = $('#data').text();
 $('#textarea_modal').val(text);
    $('#exampleModal').modal('show');
});

Если у вас есть советы или другой способ сделать это, это очень поможет.

Ответы [ 3 ]

0 голосов
/ 28 февраля 2019

Попробуйте это: 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

    <!-- Button to Open the Modal 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> -->
    <button type="button" class="btn btn-primary" id="buttonmodal">
      Open modal
    </button>

    <!-- The Modal -->
    <div class="modal" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content" style="width: 600px; height: 600px;">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            <form action="" name="modal-form" style="width: 100%; height:70%" method="post">
            <textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
          </div>

          <!-- Modal footer -->
          <div class="modal-footer">
            <button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
          </div>

        </div>
      </div>
    </div>


<script>
    $('#buttonmodal').click(function() {
    debugger;
     var text = $('#data').text();
     $('#textarea_modal').val("test 123");
        $('#myModal').modal('show');
    });
</script>

</body>
</html>
0 голосов
/ 28 февраля 2019

Хорошо, я был туп, решение было: моя ссылка на css указывает на загрузочную версию 4.3, где мой скрипт работал на более старой версии, поэтому у меня была конфликтная версия, которая не отображалась в консоли.

Tyдля тех кто помог

0 голосов
/ 28 февраля 2019

Вы ищете идентификатор "Modal", в то время как ваш компонент использует класс "modal" с идентификатором "exampleModal".<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Чтобы исправить это, вы можете изменить свой код на: 

$('.modal').modal();
$('.modal').modal('toggle');
$('.modal').modal('show');

или 

$('#exampleModal').modal();
$('#exampleModal').modal('toggle');
$('#exampleModal').modal('show');

Все зависит от того, каким вы хотели бы бытьпоиск вашего компонента.

Примечание: # используется для идентификаторов , а . для классов

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...