Модальное отображение onlick jquery - PullRequest
Новая
       11

Модальное отображение onlick jquery

1 голос
/ 07 мая 2019

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

Модал: 

<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

                </button>
            </div>
            <div class="modal-body">
                <p>.............</p>
            </div>
            <div class="modal-footer">
                ..........
            </div>
        </div>
    </div>
</div>

Кнопка: 

 <button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal"> View Details</button>

Jquery: 

  $(document).ready(function(){
            $('button.btn-view-details').on('click', function () {
                $('#commonModal').modal('show');
            })
 })

Любая помощь по этому вопросу будет оценена, спасибо!

Ответы [ 2 ]

1 голос
/ 07 мая 2019

На вашей кнопке вы можете добавить атрибут data-target, и вам не нужно вызывать всплывающее окно через jQuery: 

<button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal" data-target="#commonModal"> View Details</button>
0 голосов
/ 07 мая 2019

Вам нужно добавить только загрузочный CDNS 

$(document).ready(function() {
  $('button.btn-view-details').on('click', function() {
    $('#commonModal').modal('show');
  })
})
<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.4.0/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>
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">

        </button>
      </div>
      <div class="modal-body">
        <p>.............</p>
      </div>
      <div class="modal-footer">
        ..........
      </div>
    </div>
  </div>
</div>
Button:

<button type="button" class="btn btn-secondary btn-view-details" data-toggle="modal"> View Details</button>
...