ページ内の選択項目をブートストラップモードから取得する

Question

itemを選択し、親/現在のページに追加する機能をユーザーに提供するためにbootstrap modalを使用しています。

私はfiddleの例を作成しました。 例：2つのアイテムがあります（それぞれに3つのli）。ユーザーが特定のアイテムを選択すると、モーダルは閉じる必要があります。別のページからフェッチされた価格が四角いボックスに表示され、新しいボックスが左側に追加されます（現在は​​）。

これはjQueryを使用して達成する必要があることを何らかの形で理解していますが、さらに進んでいく方法については空白です。私はmodalsとjQueryの両方にまったく新しいので、もし誰かがそれについて考えているのであれば？

UPDATE：

私はそれに私の手を試してみましたし、私はmodalから選択した項目を取得し、親/現在のビューに追加することができるよ、それは二度目に正しく動作しません。 （2番目のボックス）。ここにupdated fiddleがあります。そして、ここで更新されたコードです：

のjQuery：

var itemLayout = '<div class="square"><div class="content"><div class="table"><div class="table-cell numbers"><div class="glyphicon glyphicon-plus prices"></div></div></div></div></div>'; 
$(document).ready(function() { 
    $(".layout").append(itemLayout); 

    $(".square").click(function() { 
    $("#myModal").modal('show'); 

    }); 
    fetchPrice(); 
}); 

function fetchPrice() { 
    var users = $('.prices'); 
    $(document).on('click', '.fetch', function() { 
    var stylesheet = $(this).text(); 
    console.log(stylesheet); 
    $("#myModal").modal('hide'); 
    users.removeClass('glyphicon glyphicon-plus').text(stylesheet); 
    $(itemLayout).insertAfter('.square'); 
    $(".square").click(function() { 
     $("#myModal").modal('show'); 

    }); 
    }); 
} 

HTML：

<div class="row"> 
    <div class="col-md-4 col-md-offset-4"> 
    <div class="layout"></div> 
    <!-- Modal HTML --> 
    <div id="myModal" class="modal fade"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title">Select to display</h4> 
      </div> 
      <!-- modal-header end --> 
      <div class="modal-body"> 
      <ul class="list-group"> 
       <li class='list-group-item list-group-item-info clearfix'> 
       <div class="pull-left">Chinese</div> 
       </li> 
       <li class='list-group-item clearfix'> 
       <div class="pull-left">Hakka Noodles </div> 
       <div class="pull-right"> 
        <div class="fetch">Price1</div> 
       </div> 
      </li> 
      <li class='list-group-item clearfix'> 
       <div class=""><b>Ingredients</b></div> 
      </li> 
      <li class='list-group-item list-group-item-info clearfix'> 
       <div class="pull-left">Others</div> 
      </li> 
      <li class='list-group-item clearfix'> 
       <div class="pull-left">Masala papad </div> 
       <div class="pull-right"> 
        <div class="fetch">Price2</div> 
       </div> 
      </li> 
      <li class='list-group-item clearfix'> 
       <div class=""><b>Ingredients</b></div> 
      </li> 
      </ul> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Add</button> 
     </div> 
    </div> 
    </div> 
</div> 

---

OLD は、ここでは、コードスニペットです：

モーダル開くため

<div class="row"> 
<div class="col-md-4 col-md-offset-4"> 
<!-- Button HTML (to Trigger Modal) --> 
<div class="square"> 
    <div class="content"> 
    <div class="table"> 
     <div class="table-cell numbers"> 
     <div class="glyphicon glyphicon-plus"></div> 
     </div> 
    </div> 
    </div> 
</div> 
<!-- square end --> 


<!-- Modal HTML --> 
<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title">Select to display</h4> 
     </div> 
     <!-- modal-header end --> 
     <div class="modal-body"> 

     <ul class="list-group"> 

      <li class='list-group-item list-group-item-info clearfix'> 
      <div class="pull-left">Chinese</div> 
      </li> 
      <li class='list-group-item clearfix'> 
      <div class="pull-left">Hakka Noodles </div> 
      <div class="pull-right"> 
       <a href="Price.php?id">Price</a> 
      </div> 
      </li> 
      <li class='list-group-item clearfix'> 
      <div class=""><b>Ingredients</b></div> 
      </li> 

      <li class='list-group-item list-group-item-info clearfix'> 
      <div class="pull-left">Others</div> 
      </li> 
      <li class='list-group-item clearfix'> 
      <div class="pull-left">Masala papad </div> 
      <div class="pull-right"> 
       <a href="Price.php?id">Price</a> 
      </div> 
      </li> 
      <li class='list-group-item clearfix'> 
      <div class=""><b>Ingredients</b></div> 
      </li> 

     </ul> 

     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Add</button> 
     </div> 
    </div> 
    </div> 
</div> 

    </div> 
</div> 

jQueryの：あなたがbootsrap最善の方法を使用している場合は、コールモーダル用

<div class="square" data-toggle="modal" data-target="#myModal">

を作る

$(document).ready(function() { 
    $(".square").click(function() { 
    $("#myModal").modal('show'); 
    }); 
}); 

Answer 1

を、エンドこの

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

のようなモーダルヘッダを行います

この場合、jqueryを書く必要はありません。 "ボックスから"