ブートストラップのクリック可能なテーブル行のモーダル

私は3つのローテーブルを持っています。私は各ローをクリックして、モーダルの飛び出しのそれぞれの内容について詳しく説明します。問題は、私は、行をクリックしたときに画面が少し暗くなりますですが、何のポップアップがブートストラップのクリック可能なテーブル行のモーダル

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script> 
     $(function(){ 
      $('#orderModal').modal({ 
       keyboard : true, 
       backdrop : "static", 
       show  : false, 
      }).on('show', function(){ 
       var getIdFromRow = $(this).data('orderid'); 
       //make your ajax call populate items or what even you need 
       $(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>')) 
      }); 

      $(".table-striped").find('tr[data-target]').on('click', function(){ 
      //or do your operations here instead of on show of modal to populate values to modal. 
       $('#orderModal').data('orderid',$(this).data('id')); 
      }); 
     }); 
    </script> 
</head> 
<body> 
<div class="container"> 
    <h1>Orders</h1> 
     <table class="table table-striped"> 
      <thead> 
       <tr> 
        <th>ID</th> 
        <th>Customer</th> 
        <th>Status</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr data-toggle="modal" data-id="1" data-target="#orderModal"> 
        <td>1</td> 
        <td>24234234</td> 
        <td>A</td> 
       </tr> 
       <tr data-toggle="modal" data-id="2" data-target="#orderModal"> 
        <td>2</td> 
        <td>24234234</td> 
        <td>A</td> 
       </tr> 
       <tr data-toggle="modal" data-id="3" data-target="#orderModal"> 
        <td>3</td> 
        <td>24234234</td> 
        <td>A</td> 
       </tr> 
      </tbody> 
     </table> 
     <div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 
       <h3>Order</h3> 
      </div> 
      <div id="orderDetails" class="modal-body"></div> 
      <div id="orderItems" class="modal-body"></div> 
      <div class="modal-footer"> 
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

出典

2016-05-24 Danial Kosarifa

を示していない理由は、あなたはおそらく、最新のブートストラップと古いHTMLモーダル形式を使用していることです。

あなたのモーダルは<div class="modal-dialog">と<div class="modal-content">の要素を含む必要があります。また、これ以上hideクラスには、もう一つactual version of bootstrap

<div id="orderModal" class="modal fade" role="dialog" aria-labelledby="orderModal" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 
     <h3>Order</h3> 
     </div> 
     <div id="orderDetails" class="modal-body"></div> 
     <div id="orderItems" class="modal-body"></div> 
     <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     </div> 
    </div> 
    </div> 
</div>

にありません、on('show.bs.modal')あるべきshow event、ではありませんon.('show')

DEMO

出典

2016-05-24 19:15:43

それは働いていた、感謝;） –

ブートストラップのクリック可能なテーブル行のモーダル

答えて

関連する問題