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

Question

我正在使用bootstrap modal 为用户提供一个功能来选择任何所需的item，然后将所选项目添加到父/当前页面。

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

我以某种方式理解这必须使用 jQuery 来实现，但对于我应该如何进一步进行却一无所知。我对modals 和jQuery 都是全新的，所以如果有人对此有任何想法吗？

更新：

我确实尝试过，我能够从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>

---

旧 这是sn-p的代码：

<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，它将“从盒子”中工作