从引导模式中提取页面中的选定项目

Question

我使用bootstrap modal为用户提供了一种功能，用于选择任何所需的item并将所选项目添加到父/当前页面。

我在fiddle上创建了一个示例，以便更好和更快地理解。 例如：有2个项目（每个有3个li）。当用户选择特定项目时，模式必须关闭，其价格（从其他页面提取）必须显示在方框上，并且必须在左侧添加新框（当前为​​）。

我以某种方式理解这一点必须使用jQuery来实现，但对于我应该如何进一步处理来说是空白的。我对modals和jQuery都是全新的，所以如果有人有任何想法呢？

UPDATE：

我曾尝试它我的手，我能选择的项目从modal获取并添加到父/当前视图，但它不会第二次正常工作（第二个盒子）。这里是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的开模态：

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

Answer 1

如果使用bootsrap最好的办法使

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

呼叫模式，到底要做这样

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

模头

在这种情况下，你不需要写任何jquery，它将工作“从盒子”