Предотвращать открытие загрузочной модальной формы при нажатии кнопки

У меня есть страница с несколькими модулями bootstrap с:

data-toggle="modal" data-target="#modal-12345"

Проблема в том, что у меня есть целая строка таблицы, которая доступна для клика, например

<tr data-toggle="modal" data-target="#modal-12345">

Модальное содержимое находится в другой строке скрытой таблицы справа, а затем следующая строка с возможностью щелчка и так далее. Теперь эта строка также содержит кнопку, которая будет нажата на другую страницу.

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

Мне нужно что-то вроде этого

<script>
$('.ID').on('click', '.btn', function(e) { e.stopPropagation(); })
</script>

Но таргетинг на это:

data-toggle="modal"

Я также попытался дать TR класс "modaltoggle", а затем называть его javascript как .modaltoggle, но это тоже не сработало.

ОТВЕТЫ

Ответ 1

Добавьте какой-то идентификатор для элемента, который вы не хотите запускать модально, например, класс no-modal, затем в свой jQuery добавьте код для модального события show.bs.modal. Перехватите relatedElement, который является элементом, который вызвал событие, затем посмотрите, есть ли у него класс, который вы ищете. Если это так, запустите e.stopPropagation().

BOOTPLY

JQuery:

$('#myModal').on('show.bs.modal', function (e) {
  var button = e.relatedTarget;
  if($(button).hasClass('no-modal')) {
    e.stopPropagation();
  }  
});

HTML:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal Header</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Как видите, у второй кнопки есть класс, который называется no-modal. При щелчке jQuery проверяет существование этого класса и, если он существует, предотвращает появление модального окна. Нажатие на первую кнопку приводит к тому, что модал всплывает нормально, потому что у него нет этого класса.

Модальные бутстрепы запускают определенные события, когда они извлекаются элементом на странице, с момента их запуска до момента, когда они полностью вытолкнулись. Вы можете прочитать об этих событиях, чтобы получить представление о том, для чего вы можете их использовать, проверив раздел "События" для модальностей Bootstrap в официальной документации.

Ответ 2

Вот JSFiddle для демонстрации того, что я собираюсь объяснить: http://jsfiddle.net/68y4zb3g/

Как объяснил и продемонстрировал MattD, предотвратить запуск модального режима довольно просто, хотя его пример относится к стандартному модальному приложению. Поскольку вы используете .btn в своем коде скрипта, я предполагаю, что вы применили его ко всем .btn кнопкам. Я также предположил, что вы сохранили модальный код, похожий на код демо-страницы Bootstrap. Если вы предоставите свой фактический код таблицы, я могу адаптировать его к тому, что у вас уже есть.

$('tr .btn').on('click', function(e) {
   e.stopPropagation();
});
td {
    border: 1px #000000 solid;
    padding: 10px;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<table>
    <tr data-toggle="modal" data-target="#modal-12345">
        <td>Launch modal 12345</td>
        <td><button id="btn-12345" class="btn">12345</button></td>
    </tr>
    <tr>
        <td colspan="2" class="modal fade" id="modal-12345" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        12345
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>

Ответ 3

$('#myModal').on('show.bs.modal', function (e) {
 return e.preventDefault(); 
});

ИЛИ ЖЕ

<button type="button" class="custom" data-toggle="modal" data-target-custom="#myModal">Launch demo modal</button>
<script>
target = $(".custom").attr('data-target-custom');
if(condition) {
 $(target).modal('show');
}
</script>

e.stopPropagation(); или e.preventDefault(); он не будет работать, если вы снова откроете модальный или несколько модальных страниц, используемых на вашей странице.