Question

我目前正在开发一个项目，需要一个.JSON数据显示在Bootbox / Bootstrap模式中。

这就是我目前的HTML：

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- dialog body -->
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- dialog buttons -->
      <div class="modal-footer">
        <button type="button" class="btn add-to-cart">ADD TO CART</button>
      </div>
    </div>
  </div>
</div>

这是我当前的JS文件：

var _modalData = function() {
  $('.item').click(function(e) {

    $('#myModal').on("show", function() {
      $('#myModal button.btn').on("click", function(e) {
        $('#myModal').modal('hide');
      });
    });

    $('#myModal').on("hide", function() {
      $('#myModal button.btn').off("click");
    });

    $('#myModal').modal({
      "backdrop"  : "static",
      "keyboard"  : true,
      "show"      : true
    });

    $.each(_itemData, function(idx, it){
      if(currentItemID === it.id){
        var det = '<div><h2 class="Product">' + it.itemName + '</h2><h4 class="Price">' + it.itemPrice + '</h4><p class="Description">' + it.itemDescription + '</p></div><img src="' + it.itemImage + '">';
        $(".modal-body").html(det);
      }
    });
  })
}

模态工作正常，数据本身没有以模态显示。

Answer 1

由于您已为此Bootbox添加了标记，因此这是您正在尝试执行的（IMO）简化版本：

var _modalData = function() {
  $('.item').on('click', function(e) {

    var list = $('<div class="product-list"></div>');

    $.each(_itemData, function(idx, it){
      if(currentItemID === it.id){
        var det = '<div><h2 class="Product">' + it.itemName + '</h2><h4 class="Price">' + it.itemPrice + '</h4><p class="Description">' + it.itemDescription + '</p></div><img src="' + it.itemImage + '">';
        det.appendTo(list);
      }
    });

    var dialog = bootbox.dialog({
        title: 'Select Product',
        message: list,
        buttons: {
            addToCart: {
                label: 'Add to Cart',
                className: 'btn-primary',
                callback: function(){
                    // do something here
                }
            }
        }
    });
  })
}

这使用了Bootbox的custom dialog功能。您可以构建产品列表，然后将其用作对话框的消息（内容）。你可以随心所欲地处理你想要的任何事情＆＃39;加入购物车＆＃39;按钮在该按钮的回调中执行;如果您不希望模式关闭，请添加return false作为回调的最后一行。

如果你走这条路，你不再需要你现在正在使用的对话标记--Bootbox会自己生成。

将JSON数据加载到Bootbox模式

1 个答案: