it-swarm.com.ru

запретить запуск модального загрузчика при нажатии кнопки

У меня есть страница с несколькими модальностями начальной загрузки с:

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, но это тоже не сработало.

11
user1227914

Добавьте какой-то идентификатор для элемента, который вы не хотите запускать модальным, например, такой класс, как 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 в официальной документации.

12
MattD

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

Как объяснил и продемонстрировал MattD, предотвратить запуск модального режима довольно просто, хотя его пример применим к стандартному модальному приложению. Поскольку вы используете .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>

Примечание: я заменил DIV, который обычно действует как внешнюю оболочку модального пространства для TD, и добавил небольшой кусочек CSS, чтобы немного легче было видеть разделение в контенте.

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

Надеюсь это поможет. ^^

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

OR

<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 (); он не будет работать, если вы снова откроете модальный режим или если на вашей странице используется несколько модальных режимов.

1
Chirag Rathore