Как открыть bootstrap modal с помощью нажатия кнопки

#javascript #html

#javascript #HTML

Вопрос:

Я разработал простую игру на js pig. Вы можете посмотреть это здесь:http://creativeartbd.com/demo/game/js-pig-game

Сначала откроется окно Bootstrap Modal для установки выигрышного счета. Теперь игра начнется нажатием на кнопку «Бросить кости».

Что ж, теперь, если вы выиграете, вы можете нажать кнопку «Новая игра», чтобы повторить игру. Здесь я хочу снова открыть режим начальной загрузки, когда я нажимаю на кнопку «Новая игра». Для этого я написал этот код:

 document.querySelector(".btn-new-game").addEventListener("click", function () {
    init();     
    document.getElementById("myModal").modal('show');       
});

но он показывает мне сообщение об ошибке в журнале консоли:

 Uncaught TypeError: document.getElementById(...).modal is not a function

Возможно, это из-за Javascript IIFE. Я точно не знаю : (

Я также пробовал использовать этот код:

 document.getElementById("myModal").click();

но не повезло : (

Мой HTML-и js-код немного длинный, поэтому я здесь не помещаю. Вы можете найти это здесь:https://jsfiddle.net/r8cga7L5

Спасибо.

1. $("#myModal").modal('show');

2.вы можете использовать $("#myModal").modal('open'); $("#myModal").modal('show'); $("#myModal").modal('toggle');

3. затем он показывает эту ошибку: bootstrap.min.js: 6 Uncaught TypeError: f [b] не является функцией

4. Вы уже используете модель при загрузке окна с помощью Jquery таким же образом, как вы можете открыть модель и при нажатии кнопки. document.querySelector(".btn-new-game").addEventListener("click", function () { init(); $('#myModal').modal('show'); });

5. пожалуйста, проверьте эту скрипку с тем, что я добавил в тот же ваш код, что и $('#myModal').modal('show'); , и его работоспособность — jsfiddle.net/z12uL3ba

Ответ №1:

Измените кнопку следующим образом, она работает отлично

 <button data-toggle="modal" data-target="#myModal" class="btn btn-new-game">New Game( )</button>

Ответ №2:

По какой-либо конкретной причине вы хотите, чтобы модал открывался из JS?

Попробуйте это для подхода Bootstrap 4:

 <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal" id="exampleModal" 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">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</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>

Ответ №3:

Вы можете просто назвать это следующим образом:

document.getElementById("myModal").modal();