2

テーブルに実装したときにブートストラップの拡張機能があることがわかった.row-linkので、各行をクリックしてもモーダルを呼び出すことができません。ブーストラップのモーダルは呼び出されません。ページを (firebug を使用して) デバッグしたときに、 a tagを配置したtd タグ、a タグリンクが表示されない理由を本当に追跡できません。表示されるのは の値のみです。例えば<a> some link </a>

Firebug で表示されるのはいくつかのリンク<a href="some link" data-toggle="modal" data-target="some taget"> click me </a>だけです。通常、デバッグすると、すべての html タグがそのように表示されます が、行リンクを使用してモーダルを呼び出すことができない理由が本当にわかりません

繰り返しますが、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>

行リンク内にモーダルビューを実装する方法を知っている人は、共有してください

4

2 に答える 2

3

このリンクを確認すると、以下のコードはリンクから 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ここでは、クリック可能にしたいクラスを tr に与え、スクリプトでそのクラスをターゲットにしてデータ属性を追加しました。

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

「アクション」リンクをクリックすると modal2 が開き、行全体をクリックすると最初のモーダルが開きます。

于 2013-04-28T18:21:25.803 に答える
3

ブーストラップ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>

ブートストラップ 2

今のところ、rowlink を使用して、リンクをクリックしたときに発生する JavaScript イベントをトリガーすることはできません。を使用して URL のみを開きますlocation.href。これは将来修正される予定です。

ただし、この場合、rowlink を使用する必要はありません。を使用する代わりに、data-toggle="modal"それぞれtrに追加してプロパティを追加できます。data-targethref

ただし、rowlink スタイルを有効にするには、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>

フィドルを見る

于 2013-04-29T21:17:10.650 に答える