Question

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

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

我以某种方式理解这必须使用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>

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最好的方式make

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

对于呼叫模式，结束这样的模态标题

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

在这种情况下，你不需要编写任何jquery，它将工作“来自框”

从bootstrap-modal

1 个答案: