У меня есть HTML-страница, которая содержит несколько модальностей Bootstrap. Я хочу закрыть их с помощью jquery. Но у меня проблемы с выбором.

Это образец HTML:

<div class="modal-footer span5">
  <input class="btn btn-primary" name="commit" type="submit" value="Save Material">
</div>

И этот JQuery (сценарий кофе) не работает:

$(".modal-footer .btn").each.click ->
  alert 'commit'
  $(this).modal "hide"

Или это:

  $(".modal-footer .btn").click.each ->
    alert 'commit'
    $(this).modal "hide"

Спасибо!

0
Reddirt 22 Янв 2013 в 20:35

2 ответа

Лучший ответ

Это не код JavaScript. Попробуй это:

$(".modal-footer .btn").click(function(){
  alert('commit');
  $(this).parent().hide();
});

В любом случае, я не понимаю, почему вы закрываете модальное с помощью jquery, если начальная загрузка делает это автоматически.

1
AlecTMH 22 Янв 2013 в 16:38

Двигатели JS не интерпретируют Coffeescript. Вместо этого этот блок должен быть сначала скомпилирован в javascript. (или вы можете просто написать Javascript напрямую).

Если ваш класс .modal-footer происходит из модального загрузочного модема по умолчанию, это означает, что он является единственной частью общего модального html-блока, нижний колонтитул может быть не лучшим местом для прикрепления обработчика для его закрытия.

Начальная загрузка поставляется с модальной структурой по умолчанию:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
       <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Чтобы закрыть его, проще всего было бы использовать встроенное поведение начальной загрузки, но с помощью ссылки на самый внешний html-элемент, который содержит модальный тип, в данном случае div, где id = "myModal":

$ ( '# MyModal ') модальный ( ' скрыть ') .

Например, если вы знаете идентификатор контейнера:

$(".modal-footer .btn").click(function(){
    alert('commit');
    $('#myModal').modal('hide');
});

Если нет, вы можете пройтись по дереву, используя строку вызовов .parent (), как в примере из предыдущего ответа.

Если я что-то упустил ...

2
squeezebox 22 Янв 2013 в 17:20