593

それぞれにIDが付いているハイパーリンクがいくつかあります。このリンクをクリックすると、モーダル（http://twitter.github.com/bootstrap/javascript.html#modals）を開き、このIDをモーダルに渡します。グーグルで検索しましたが、助けになるものが見つかりませんでした。

これはコードです：

<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>

どちらを開く必要があります：

<div class="modal hide" id="addBookDialog">
    <div class="modal-body">
        <input type="hidden" name="bookId" id="bookId" value=""/>
    </div>
</div>

このコードで： 

$(document).ready(function () {
    $(".open-AddBookDialog").click(function () {
        $('#bookId').val($(this).data('id'));
        $('#addBookDialog').modal('show');
    });
});

ただし、ハイパーリンクをクリックしても何も起こりません。ハイパーリンク<a href="#addBookDialog" ...>を指定すると、モーダルは正常に開きますが、データが含まれていません。

私はこの例に従いました：Bootstrapのmodal.show（）関数にvalues引数を渡す方法

（そして私もこれを試しました：モーダルダイアログで入力値を設定する方法は？）

4

15 に答える 15

585

jQueryの.onイベントハンドラーを使用してこれを機能させることができると思います。

これがあなたがテストできるフィドルです。モーダルを表示できるように、フィドルのHTMLフレームをできるだけ拡張してください。

http://jsfiddle.net/Au9tc/605/

HTML

<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<p>&nbsp;</p>


<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

JAVASCRIPT

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
     // As pointed out in comments, 
     // it is unnecessary to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});
于 2012-05-17T12:20:53.213 に答える
40

@ mg1075 のコードからどのように実装したかを次に示します。モーダル トリガー リンク/ボタンにクラスを割り当てる必要がないように、もう少し一般的なコードが必要でした。

Twitter Bootstrap 3.0.3 でテスト済み。

HTML

<a href="#" data-target="#my_modal" data-toggle="modal" data-id="my_id_value">Open Modal</a>

ジャバスクリプト

$(document).ready(function() {

  $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {

    var data_id = '';

    if (typeof $(this).data('id') !== 'undefined') {

      data_id = $(this).data('id');
    }

    $('#my_element_id').val(data_id);
  })
});
于 2014-02-14T00:50:24.623 に答える
1

これは、id_data を modal に送信する方法です。

<input
    href="#"
    data-some-id="uid0123456789"
    data-toggle="modal"
    data-target="#my_modal"
    value="SHOW MODAL"
    type="submit"
    class="btn modal-btn"/>

<div class="col-md-5">
  <div class="modal fade" id="my_modal">
   <div class="modal-body modal-content">
     <h2 name="hiddenValue" id="hiddenValue" />
   </div>
   <div class="modal-footer" />
</div>

そしてJavaScript：

    $(function () {
     $(".modal-btn").click(function (){
       var data_var = $(this).data('some-id');
       $(".modal-body h2").text(data_var);
     })
    });
于 2020-03-04T22:11:05.393 に答える
0

これが私にとってうまくいくことがわかりました：

リンクで：

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#message<?php echo $row['id'];?>">Message</button>

モーダルで：

<div id="message<?php echo $row['id'];?>" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
        <?php echo $row['id'];?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
于 2020-12-17T21:27:06.777 に答える