Откройте Bootstrap 4 Modal с помощью JavaScript, нажав на ссылку - PullRequest
Новая
       9

Откройте Bootstrap 4 Modal с помощью JavaScript, нажав на ссылку

0 голосов
/ 07 мая 2018

Я хочу открыть модал, когда нажимаю на ссылку. К сожалению, я не смог изменить HTML-код ссылки. Я мог только изменить содержание href.

Как это: 

<a href="#Modal">Open modal</a>

Я не могу добавить атрибуты данных или любой другой HTML.

В документах я нашел способ открыть модал через JavaScript. Я добавил этот код на свой сайт: 

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

Работает, но модал открывается сразу после загрузки страницы. Мне нужно открыть его после того, как я нажму на ссылку.

Есть ли способ сделать это?

Вот мой модал: 

<div class="modal" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <p class="h5 modal-title" id="ModalTitle">Modal Title</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                Content
            </div>
        </div>
    </div>
</div>

Ответы [ 3 ]

0 голосов
/ 07 мая 2018

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

<!-- Trigger the modal with a button -->
<a href="#" class="btn btn-info btn-lg">Open Modal</a>

<!-- Modal -->
<div id="myModal" 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">Modal Header</h4>
  </div>
  <div class="modal-body">
    <p>Some text in the modal.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

  </div>
</div>


$('a').on( "click", function() {
   $('#myModal').modal('show');
});
0 голосов
/ 07 мая 2018

Событие нажатия триггера на a[href$="#Modal"]. 

$('a[href$="#Modal"]').on( "click", function() {
   $('#Modal').modal('show');
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Trigger the modal with a button -->
<a href="#Modal" class="btn btn-info btn-lg">Open modal</a>
<!-- Modal -->
<div id="Modal" 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">Modal Header</h4>
  </div>
  <div class="modal-body">
    <p>Some text in the modal.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

  </div>
</div>

EIDT: изменил myModal на модальный

0 голосов
/ 07 мая 2018

нужно открыть после того, как я нажму на ссылку.

Так что вам нужно проверить, нажата ли ссылка.

jQuery предоставляет множество способов выбора элемента. http://api.jquery.com/category/selectors/

$('a[href$="#Modal"]').on( "click", function() {
   $('#Modal').modal();
});`
...