Jasny Bootstrap rowlink Модальный вызов

Я только что узнал, что есть расширение для начальной загрузки, когда я пытаюсь найти что-то вроде .row-linkпоэтому, когда я реализовал это на своей таблице, я не могу вызвать модальный режим при нажатии на каждую строку. модал в boostrap не будет вызываться. Я действительно не могу понять, почему, когда я отлаживал (используя firebug) страницу, тег td, куда я помещал свой тег, моя ссылка тега не видна. тот, который отображается, является только значением. например <a> some link </a>

какая-то ссылка - это единственное, что я вижу в firebug, обычно, когда я отлаживаю, я вижу все теги html примерно так <a href="some link" data-toggle="modal" data-target="some taget"> click me </a>но я действительно не знаю, почему я не могу вызвать модал, используя row-link

Опять же, моя цель, когда я нажимаю 1 строку, появляется модальное поле

вот мой фрагмент кода

<table>
   <thead>
        // some headers
   </thead>
   <tbody data-provides="rowlink">
      <tr>
        <td><a href="#myModal" data-toggle="modal" data-target="modal">Click me</a> </td>
        <td>/*some data*/</td>
        <td>/*some data*/</td>
      </tr>
   </tbody>
</table>

<div id="myModal" /*some legit modal attr please see bootstrap site i just copied them*/>
    <div>
        MODAL HEADER
    </div>

    <div>
        MODAL BODY
    <div>

    <div>
        MODAL FOOTER
    <div>
</div>

КОГДА Я ПОПРОБОВАЛ ЭТОТ ОДИН, ОБРАТИТЕ ВНИМАНИЕ, ЧТО ЭТА ссылка находится за пределами тега html таблицы

<a href="#myModal" data-toggle="modal" data-targe="modal">Click me</a>

Кто-нибудь знает, как реализовать модальное представление внутри ссылки на строку, пожалуйста, поделитесь

Источник

2 ответа

Решение

Если вы проверите эту ссылку, приведенный ниже код берет href из ссылки и изменяет window.location на href при щелчке строки и, следовательно, ожидает URL-адрес.

var href = link.attr('href')

$(this).find('td').not('.nolink').click(function() {
   window.location = href;
})

Так же <a> удаляемый тег также упоминается в их коде.

link.replaceWith(link.html())

Решение этой проблемы состоит в том, чтобы вручную написать сценарий, в котором вы нацеливаетесь на строку, которая будет иметь модальное значение, и добавляете обязательный атрибут в строку. Смотри Скрипку. Здесь я дал класс .rowlink-modal чтобы узнать, какой из них должен быть кликабельным и нацелиться на этот класс в скрипте и добавить атрибуты данных.

$('.rowlink-modal').each(function(){
 $(this)
   .attr('data-toggle','modal')
   .attr('data-target','#myModal');
});

Ссылка "Действие" при нажатии откроет modal2, и когда вы щелкнете по всей строке, откроется первый модальный.

Источник

Boostrap 3

Это работает из коробки с Bootstrap 3.

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody data-link="row" class="rowlink">
        <tr>
            <td><a href="#myModal" data-toggle="modal">Modals</a></td>
            <td>some text</td>
            <td class="rowlink-skip"><a href="#myModal2" data-toggle="modal">Action</a></td>
        </tr>
    </tbody>
</table>

Bootstrap 2

На данный момент ссылка на строку не может использоваться для запуска событий JavaScript, которые происходят при нажатии на ссылку. Он будет открывать только URL-адреса, используя location.href, Это будет исправлено в будущем.

Однако в этом случае нет необходимости использовать rowlink. Можете добавить data-toggle="modal" для каждого tr и добавить недвижимость data-target Вместо того, чтобы использовать href,

Однако, чтобы получить эффект стиля строки, добавьте rowlink класс к tr,

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr class="rowlink" data-target="#myModal" data-toggle="modal">
            <td>Modals</td>
            <td>some text</td>
            <td class="nolink"><a href="#myModal2" data-toggle="modal">Action</a></td>
        </tr>
    </tbody>
</table>

Увидеть скрипку

Источник
Другие вопросы по тегам