篮子项目不在模态弹出窗口内更新

时间:2015-05-23 08:17:18

标签: javascript jquery html modal-dialog jsfiddle

我似乎无法想象这个噩梦。 所以我试图制作一个包含在模态弹出窗口中的篮子系统。 当我按原样离开时(Original Basket System),效果很好。

当我将模态添加到等式中时,它会爆炸。 该列表将添加并完全正常,直到您尝试删除任何列表项。然后它删除了错误的数量,弄乱了总数,这是最重要的......当你关闭模态窗口并再次打开它时,所有的项目都会从死亡中回来! (Basket With Modal = BOOM

我在这里缺少什么,为什么内容在模态中没有正确更新,但没有?



$(document).ready(function() {
  var Arrays = new Array();
  $('#wrap li').click(function() {
    var thisID = $(this).attr('id');
    var itemname = $(this).find('div .name').html();
    var itemprice = $(this).find('div .price').html();

    if (include(Arrays, thisID)) {
      var price = $('#each-' + thisID).children(".shopp-price").find('em').html();
      var quantity = $('#each-' + thisID).children(".shopp-quantity").html();
      quantity = parseInt(quantity) + parseInt(1);

      var total = parseInt(itemprice) * parseInt(quantity);

      $('#each-' + thisID).children(".shopp-price").find('em').html(total);
      $('#each-' + thisID).children(".shopp-quantity").html(quantity);

      var prev_charges = $('.cart-total span').html();
      var prev_quantity = $('.cart-quantity span').html();

      prev_charges = parseInt(prev_charges) - parseInt(price);

      prev_charges = parseInt(prev_charges) + parseInt(total);
      prev_quantity = parseInt(prev_quantity) + parseInt(1);

      $('.cart-total span').html(prev_charges);
      $('.cart-quantity span').html(prev_quantity);

      $('#total-hidden-charges').val(prev_charges);
      $('#total-hidden-quantity').val(prev_quantity);
    } else {
      Arrays.push(thisID);

      var prev_charges = $('.cart-total span').html();
      var prev_quantity = $('.cart-quantity span').html();

      prev_charges = parseInt(prev_charges) + parseInt(itemprice);
      prev_quantity = parseInt(prev_quantity) + parseInt(1);

      $('.cart-total span').html(prev_charges);
      $('.cart-quantity span').html(prev_quantity);

      $('#total-hidden-charges').val(prev_charges);
      $('#total-hidden-quantity').val(prev_quantity);

      $('#left_bar .cart-info').append('<div class="shopp" id="each-' + thisID + '"><div class="label">' + itemname + '</div><div class="shopp-price"> $<em>' + itemprice + '</em></div><span class="shopp-quantity">1</span><img src="remove.png" class="remove" /><br class="all" /></div>');
    }
  });


  $('.remove').livequery('click', function() {

    var deduct = $(this).parent().children(".shopp-price").find('em').html();
    var deduct2 = $(this).parent().children(".shopp-quantity").html();

    var prev_charges = $('.cart-total span').html();
    var prev_quantity = $('.cart-quantity span').html();

    var thisID = $(this).parent().attr('id').replace('each-', '');

    var pos = getpos(Arrays, thisID);
    Arrays.splice(pos, 1, "0")

    prev_charges = parseInt(prev_charges) - parseInt(deduct);
    prev_quantity = parseInt(prev_quantity) - parseInt(deduct2);

    $('.cart-total span').html(prev_charges);
    $('.cart-quantity span').html(prev_quantity);

    $('#total-hidden-charges').val(prev_charges);
    $('#total-hidden-quantity').val(prev_quantity);

    $(this).parent().remove();
  });

  $('#Submit').livequery('click', function() {
    var totalCharge = $('#total-hidden-charges').val();
    var totalQuantity = $('#total-hidden-quantity').val();
    $('#left_bar').html('Total Charges: $' + totalCharge + ' quantity: ' + totalQuantity);
    return false;
  });
});

function include(arr, obj) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == obj) return true;
  }
}

function getpos(arr, obj) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == obj) return i;
  }
}

//Basic.js
jQuery(function($) {
  // Load dialog on page load
  //$('#basic-modal-content').modal();

  // Load dialog on click
  $('#basic-modal .basic').click(function(e) {
    $('#basic-modal-content').modal();

    return false;
  });
});









//jquery.simplemodal.js
(function(b) {
  "function" === typeof define && define.amd ? define(["jquery"], b) : b(jQuery)
})(function(b) {
  var j = [],
    n = b(document),
    k = navigator.userAgent.toLowerCase(),
    l = b(window),
    g = [],
    o = null,
    p = /msie/.test(k) && !/opera/.test(k),
    q = /opera/.test(k),
    m, r;
  m = p && /msie 6./.test(k) && "object" !== typeof window.XMLHttpRequest;
  r = p && /msie 7.0/.test(k);
  b.modal = function(a, h) {
    return b.modal.impl.init(a, h)
  };
  b.modal.close = function() {
    b.modal.impl.close()
  };
  b.modal.focus = function(a) {
    b.modal.impl.focus(a)
  };
  b.modal.setContainerDimensions =
    function() {
      b.modal.impl.setContainerDimensions()
    };
  b.modal.setPosition = function() {
    b.modal.impl.setPosition()
  };
  b.modal.update = function(a, h) {
    b.modal.impl.update(a, h)
  };
  b.fn.modal = function(a) {
    return b.modal.impl.init(this, a)
  };
  b.modal.defaults = {
    appendTo: "body",
    focus: !0,
    opacity: 50,
    overlayId: "simplemodal-overlay",
    overlayCss: {},
    containerId: "simplemodal-container",
    containerCss: {},
    dataId: "simplemodal-data",
    dataCss: {},
    minHeight: null,
    minWidth: null,
    maxHeight: null,
    maxWidth: null,
    autoResize: !1,
    autoPosition: !0,
    zIndex: 1E3,
    close: !0,
    closeHTML: '<a class="modalCloseImg" title="Close"></a>',
    closeClass: "simplemodal-close",
    escClose: !0,
    overlayClose: !1,
    fixed: !0,
    position: null,
    persist: !1,
    modal: !0,
    onOpen: null,
    onShow: null,
    onClose: null
  };
  b.modal.impl = {
    d: {},
    init: function(a, h) {
      if (this.d.data) return !1;
      o = p && !b.support.boxModel;
      this.o = b.extend({}, b.modal.defaults, h);
      this.zIndex = this.o.zIndex;
      this.occb = !1;
      if ("object" === typeof a) {
        if (a = a instanceof b ? a : b(a), this.d.placeholder = !1, 0 < a.parent().parent().size() && (a.before(b("<span></span>").attr("id",
          "simplemodal-placeholder").css({
          display: "none"
        })), this.d.placeholder = !0, this.display = a.css("display"), !this.o.persist)) this.d.orig = a.clone(!0)
      } else if ("string" === typeof a || "number" === typeof a) a = b("<div></div>").html(a);
      else return alert("SimpleModal Error: Unsupported data type: " + typeof a), this;
      this.create(a);
      this.open();
      b.isFunction(this.o.onShow) && this.o.onShow.apply(this, [this.d]);
      return this
    },
    create: function(a) {
      this.getDimensions();
      if (this.o.modal && m) this.d.iframe = b('<iframe src="javascript:false;"></iframe>').css(b.extend(this.o.iframeCss, {
        display: "none",
        opacity: 0,
        position: "fixed",
        height: g[0],
        width: g[1],
        zIndex: this.o.zIndex,
        top: 0,
        left: 0
      })).appendTo(this.o.appendTo);
      this.d.overlay = b("<div></div>").attr("id", this.o.overlayId).addClass("simplemodal-overlay").css(b.extend(this.o.overlayCss, {
        display: "none",
        opacity: this.o.opacity / 100,
        height: this.o.modal ? j[0] : 0,
        width: this.o.modal ? j[1] : 0,
        position: "fixed",
        left: 0,
        top: 0,
        zIndex: this.o.zIndex + 1
      })).appendTo(this.o.appendTo);
      this.d.container = b("<div></div>").attr("id", this.o.containerId).addClass("simplemodal-container").css(b.extend({
        position: this.o.fixed ?
          "fixed" : "absolute"
      }, this.o.containerCss, {
        display: "none",
        zIndex: this.o.zIndex + 2
      })).append(this.o.close && this.o.closeHTML ? b(this.o.closeHTML).addClass(this.o.closeClass) : "").appendTo(this.o.appendTo);
      this.d.wrap = b("<div></div>").attr("tabIndex", -1).addClass("simplemodal-wrap").css({
        height: "100%",
        outline: 0,
        width: "100%"
      }).appendTo(this.d.container);
      this.d.data = a.attr("id", a.attr("id") || this.o.dataId).addClass("simplemodal-data").css(b.extend(this.o.dataCss, {
        display: "none"
      })).appendTo("body");
      this.setContainerDimensions();
      this.d.data.appendTo(this.d.wrap);
      (m || o) && this.fixIE()
    },
    bindEvents: function() {
      var a = this;
      b("." + a.o.closeClass).bind("click.simplemodal", function(b) {
        b.preventDefault();
        a.close()
      });
      a.o.modal && a.o.close && a.o.overlayClose && a.d.overlay.bind("click.simplemodal", function(b) {
        b.preventDefault();
        a.close()
      });
      n.bind("keydown.simplemodal", function(b) {
        a.o.modal && 9 === b.keyCode ? a.watchTab(b) : a.o.close && a.o.escClose && 27 === b.keyCode && (b.preventDefault(), a.close())
      });
      l.bind("resize.simplemodal orientationchange.simplemodal",
        function() {
          a.getDimensions();
          a.o.autoResize ? a.setContainerDimensions() : a.o.autoPosition && a.setPosition();
          m || o ? a.fixIE() : a.o.modal && (a.d.iframe && a.d.iframe.css({
            height: g[0],
            width: g[1]
          }), a.d.overlay.css({
            height: j[0],
            width: j[1]
          }))
        })
    },
    unbindEvents: function() {
      b("." + this.o.closeClass).unbind("click.simplemodal");
      n.unbind("keydown.simplemodal");
      l.unbind(".simplemodal");
      this.d.overlay.unbind("click.simplemodal")
    },
    fixIE: function() {
      var a = this.o.position;
      b.each([this.d.iframe || null, !this.o.modal ? null : this.d.overlay,
        "fixed" === this.d.container.css("position") ? this.d.container : null
      ], function(b, e) {
        if (e) {
          var f = e[0].style;
          f.position = "absolute";
          if (2 > b) f.removeExpression("height"), f.removeExpression("width"), f.setExpression("height", 'document.body.scrollHeight > document.body.clientHeight ? document.body.scrollHeight : document.body.clientHeight + "px"'), f.setExpression("width", 'document.body.scrollWidth > document.body.clientWidth ? document.body.scrollWidth : document.body.clientWidth + "px"');
          else {
            var c, d;
            a && a.constructor ===
              Array ? (c = a[0] ? "number" === typeof a[0] ? a[0].toString() : a[0].replace(/px/, "") : e.css("top").replace(/px/, ""), c = -1 === c.indexOf("%") ? c + ' + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"' : parseInt(c.replace(/%/, "")) + ' * ((document.documentElement.clientHeight || document.body.clientHeight) / 100) + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"', a[1] && (d = "number" === typeof a[1] ?
                a[1].toString() : a[1].replace(/px/, ""), d = -1 === d.indexOf("%") ? d + ' + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"' : parseInt(d.replace(/%/, "")) + ' * ((document.documentElement.clientWidth || document.body.clientWidth) / 100) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"')) : (c = '(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"',
                d = '(document.documentElement.clientWidth || document.body.clientWidth) / 2 - (this.offsetWidth / 2) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"');
            f.removeExpression("top");
            f.removeExpression("left");
            f.setExpression("top", c);
            f.setExpression("left", d)
          }
        }
      })
    },
    focus: function(a) {
      var h = this,
        a = a && -1 !== b.inArray(a, ["first", "last"]) ? a : "first",
        e = b(":input:enabled:visible:" + a, h.d.wrap);
      setTimeout(function() {
          0 < e.length ? e.focus() : h.d.wrap.focus()
        },
        10)
    },
    getDimensions: function() {
      var a = "undefined" === typeof window.innerHeight ? l.height() : window.innerHeight;
      j = [n.height(), n.width()];
      g = [a, l.width()]
    },
    getVal: function(a, b) {
      return a ? "number" === typeof a ? a : "auto" === a ? 0 : 0 < a.indexOf("%") ? parseInt(a.replace(/%/, "")) / 100 * ("h" === b ? g[0] : g[1]) : parseInt(a.replace(/px/, "")) : null
    },
    update: function(a, b) {
      if (!this.d.data) return !1;
      this.d.origHeight = this.getVal(a, "h");
      this.d.origWidth = this.getVal(b, "w");
      this.d.data.hide();
      a && this.d.container.css("height", a);
      b && this.d.container.css("width",
        b);
      this.setContainerDimensions();
      this.d.data.show();
      this.o.focus && this.focus();
      this.unbindEvents();
      this.bindEvents()
    },
    setContainerDimensions: function() {
      var a = m || r,
        b = this.d.origHeight ? this.d.origHeight : q ? this.d.container.height() : this.getVal(a ? this.d.container[0].currentStyle.height : this.d.container.css("height"), "h"),
        a = this.d.origWidth ? this.d.origWidth : q ? this.d.container.width() : this.getVal(a ? this.d.container[0].currentStyle.width : this.d.container.css("width"), "w"),
        e = this.d.data.outerHeight(!0),
        f =
        this.d.data.outerWidth(!0);
      this.d.origHeight = this.d.origHeight || b;
      this.d.origWidth = this.d.origWidth || a;
      var c = this.o.maxHeight ? this.getVal(this.o.maxHeight, "h") : null,
        d = this.o.maxWidth ? this.getVal(this.o.maxWidth, "w") : null,
        c = c && c < g[0] ? c : g[0],
        d = d && d < g[1] ? d : g[1],
        i = this.o.minHeight ? this.getVal(this.o.minHeight, "h") : "auto",
        b = b ? this.o.autoResize && b > c ? c : b < i ? i : b : e ? e > c ? c : this.o.minHeight && "auto" !== i && e < i ? i : e : i,
        c = this.o.minWidth ? this.getVal(this.o.minWidth, "w") : "auto",
        a = a ? this.o.autoResize && a > d ? d : a < c ? c : a : f ?
        f > d ? d : this.o.minWidth && "auto" !== c && f < c ? c : f : c;
      this.d.container.css({
        height: b,
        width: a
      });
      this.d.wrap.css({
        overflow: e > b || f > a ? "auto" : "visible"
      });
      this.o.autoPosition && this.setPosition()
    },
    setPosition: function() {
      var a, b;
      a = g[0] / 2 - this.d.container.outerHeight(!0) / 2;
      b = g[1] / 2 - this.d.container.outerWidth(!0) / 2;
      var e = "fixed" !== this.d.container.css("position") ? l.scrollTop() : 0;
      this.o.position && "[object Array]" === Object.prototype.toString.call(this.o.position) ? (a = e + (this.o.position[0] || a), b = this.o.position[1] || b) :
        a = e + a;
      this.d.container.css({
        left: b,
        top: a
      })
    },
    watchTab: function(a) {
      if (0 < b(a.target).parents(".simplemodal-container").length) {
        if (this.inputs = b(":input:enabled:visible:first, :input:enabled:visible:last", this.d.data[0]), !a.shiftKey && a.target === this.inputs[this.inputs.length - 1] || a.shiftKey && a.target === this.inputs[0] || 0 === this.inputs.length) a.preventDefault(), this.focus(a.shiftKey ? "last" : "first")
      } else a.preventDefault(), this.focus()
    },
    open: function() {
      this.d.iframe && this.d.iframe.show();
      b.isFunction(this.o.onOpen) ?
        this.o.onOpen.apply(this, [this.d]) : (this.d.overlay.show(), this.d.container.show(), this.d.data.show());
      this.o.focus && this.focus();
      this.bindEvents()
    },
    close: function() {
      if (!this.d.data) return !1;
      this.unbindEvents();
      if (b.isFunction(this.o.onClose) && !this.occb) this.occb = !0, this.o.onClose.apply(this, [this.d]);
      else {
        if (this.d.placeholder) {
          var a = b("#simplemodal-placeholder");
          this.o.persist ? a.replaceWith(this.d.data.removeClass("simplemodal-data").css("display", this.display)) : (this.d.data.hide().remove(), a.replaceWith(this.d.orig))
        } else this.d.data.hide().remove();
        this.d.container.hide().remove();
        this.d.overlay.hide();
        this.d.iframe && this.d.iframe.hide().remove();
        this.d.overlay.remove();
        this.d = {}
      }
    }
  }
});
&#13;
#wrap ul li {
  border: 2px solid black;
  height: 50px;
  width: 100px;
  margin-left: 5px;
  overflow: hidden;
}
#wrap ul li div {
  text-align: center;
}
#wrap ul li {
  cursor: pointer;
}
#left_bar {
  height: 350px;
  width: 250px;
}
button {
  background: none repeat scroll 0 0 #AD7B05;
  color: #FFFFFF;
  border: medium none;
  margin-right: -14px;
  padding: 10px;
  cursor: pointer;
}
.shopp,
.cart-total {
  border: solid #ccc 1px;
  background: url(remove.png) center right no-repeat 5px;
  width: 260px;
}
div.shopp div.label {
  width: 130px;
  float: left;
}
div.shopp div.shopp-price {
  width: 70px;
  float: left;
}
#container {
  margin: 0 auto;
  padding-top: 20px;
  width: 800px;
}
#simplemodal-container {
  height: 360px;
  width: 600px;
  color: #bbb;
  background-color: #333;
  border: 4px solid #444;
  padding: 12px;
}
#simplemodal-container .simplemodal-data {
  padding: 8px;
}
#simplemodal-container code {
  background: #141414;
  border-left: 3px solid #65B43D;
  color: #bbb;
  display: block;
  font-size: 12px;
  margin-bottom: 12px;
  padding: 4px 6px 6px;
}
#simplemodal-container a {
  color: #ddd;
}
#simplemodal-container a.modalCloseImg {
  background: url(../light/img/basic/x.png) no-repeat;
  width: 25px;
  border: solid #ccc 1px;
  height: 29px;
  display: inline;
  z-index: 3200;
  position: absolute;
  top: -15px;
  right: -16px;
  cursor: pointer;
}
#simplemodal-container h3 {
  color: #84b8d9;
}
#basic-modal-content {
  display: none;
}
#simplemodal-overlay {
  background-color: #000;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://www.sethcraft.com/elle/include/jquery.livequery.js"></script>

<div>
  <div id="wrap" align="left">
    <ul>
      <li id="1">
        <br clear="all" />
        <div><span class="name">Ace</span>: $<span class="price">800</span> 
        </div>
      </li>
      <li id="2">
        <br clear="all" />
        <div><span class="name">Bat</span>: $<span class="price">500 </span>
        </div>
      </li>
      <li id="3">
        <br clear="all" />
        <div><span class="name">Cat</span>: $<span class="price">450</span>
        </div>
      </li>
    </ul>
    <br clear="all" />
  </div>
</div>

<div id='container'>
  <div id='content'>
    <div id='basic-modal'>
      <input type='button' name='basic' value='Basket' class='basic' />
    </div>

    <!-- modal content -->
    <div id="basic-modal-content">
      <div id="left_bar">
        <form action="#">
          <div class="cart-info"></div>
          <div class="cart-total">
            <b>Total Charges:</b> $<span>0</span>
            <input type="hidden" name="total-hidden-charges" id="total-hidden-charges" value="0" />
          </div>
          <div class="cart-quantity">
            <b>Total quantity:</b> #<span>0</span>
            <input type="hidden" name="total-hidden-quantity" id="total-hidden-quantity" value="0" />
          </div>
          <button type="submit" id="Submit">CheckOut</button>
        </form>
      </div>
    </div>

    <!-- preload the images -->
    <div style='display:none'>
      <img src='../light/img/basic/x.png' alt='' />
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

问题在于您的模态插件使用的选项:simplemodal。它坚持不懈的选择:

  

persist [Boolean:false]在模态调用中保留数据?仅用过   对于现有的DOM元素。如果为true,则数据将保持不变   模态调用,如果为false,则数据将恢复为原始数据   状态。

将其设置为1将导致弹出窗口保持并保留数据。当您在jQuery中使用插件时,最好始终阅读所有选项以查看它的默认设置,并且可以配置以防止出现这样的奇怪意外。

$('#basic-modal-content').modal({
      persist: 1
});

$(document).ready(function() {
  var Arrays = new Array();
  $('#wrap li').click(function() {
    var thisID = $(this).attr('id');
    var itemname = $(this).find('div .name').html();
    var itemprice = $(this).find('div .price').html();

    if (include(Arrays, thisID)) {
      var price = $('#each-' + thisID).children(".shopp-price").find('em').html();
      var quantity = $('#each-' + thisID).children(".shopp-quantity").html();
      quantity = parseInt(quantity) + parseInt(1);

      var total = parseInt(itemprice) * parseInt(quantity);

      $('#each-' + thisID).children(".shopp-price").find('em').html(total);
      $('#each-' + thisID).children(".shopp-quantity").html(quantity);

      var prev_charges = $('.cart-total span').html();
      var prev_quantity = $('.cart-quantity span').html();

      prev_charges = parseInt(prev_charges) - parseInt(price);

      prev_charges = parseInt(prev_charges) + parseInt(total);
      prev_quantity = parseInt(prev_quantity) + parseInt(1);

      $('.cart-total span').html(prev_charges);
      $('.cart-quantity span').html(prev_quantity);

      $('#total-hidden-charges').val(prev_charges);
      $('#total-hidden-quantity').val(prev_quantity);
    } else {
      Arrays.push(thisID);

      var prev_charges = $('.cart-total span').html();
      var prev_quantity = $('.cart-quantity span').html();

      prev_charges = parseInt(prev_charges) + parseInt(itemprice);
      prev_quantity = parseInt(prev_quantity) + parseInt(1);

      $('.cart-total span').html(prev_charges);
      $('.cart-quantity span').html(prev_quantity);

      $('#total-hidden-charges').val(prev_charges);
      $('#total-hidden-quantity').val(prev_quantity);

      $('#left_bar .cart-info').append('<div class="shopp" id="each-' + thisID + '"><div class="label">' + itemname + '</div><div class="shopp-price"> $<em>' + itemprice + '</em></div><span class="shopp-quantity">1</span><img src="remove.png" class="remove" /><br class="all" /></div>');
    }
  });


  $('.remove').livequery('click', function() {

    var deduct = $(this).parent().children(".shopp-price").find('em').html();
    var deduct2 = $(this).parent().children(".shopp-quantity").html();

    var prev_charges = $('.cart-total span').html();
    var prev_quantity = $('.cart-quantity span').html();

    var thisID = $(this).parent().attr('id').replace('each-', '');

    var pos = getpos(Arrays, thisID);
    Arrays.splice(pos, 1, "0")

    prev_charges = parseInt(prev_charges) - parseInt(deduct);
    prev_quantity = parseInt(prev_quantity) - parseInt(deduct2);

    $('.cart-total span').html(prev_charges);
    $('.cart-quantity span').html(prev_quantity);

    $('#total-hidden-charges').val(prev_charges);
    $('#total-hidden-quantity').val(prev_quantity);

    $(this).parent().remove();
  });

  $('#Submit').livequery('click', function() {
    var totalCharge = $('#total-hidden-charges').val();
    var totalQuantity = $('#total-hidden-quantity').val();
    $('#left_bar').html('Total Charges: $' + totalCharge + ' quantity: ' + totalQuantity);
    return false;
  });
});

function include(arr, obj) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == obj) return true;
  }
}

function getpos(arr, obj) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == obj) return i;
  }
}

//Basic.js
jQuery(function($) {
  // Load dialog on page load
  //$('#basic-modal-content').modal();

  // Load dialog on click
  $('#basic-modal .basic').click(function(e) {
    $('#basic-modal-content').modal({
      persist: 1
    });

    return false;
  });
});









//jquery.simplemodal.js
(function(b) {
  "function" === typeof define && define.amd ? define(["jquery"], b) : b(jQuery)
})(function(b) {
  var j = [],
    n = b(document),
    k = navigator.userAgent.toLowerCase(),
    l = b(window),
    g = [],
    o = null,
    p = /msie/.test(k) && !/opera/.test(k),
    q = /opera/.test(k),
    m, r;
  m = p && /msie 6./.test(k) && "object" !== typeof window.XMLHttpRequest;
  r = p && /msie 7.0/.test(k);
  b.modal = function(a, h) {
    return b.modal.impl.init(a, h)
  };
  b.modal.close = function() {
    b.modal.impl.close()
  };
  b.modal.focus = function(a) {
    b.modal.impl.focus(a)
  };
  b.modal.setContainerDimensions =
    function() {
      b.modal.impl.setContainerDimensions()
    };
  b.modal.setPosition = function() {
    b.modal.impl.setPosition()
  };
  b.modal.update = function(a, h) {
    b.modal.impl.update(a, h)
  };
  b.fn.modal = function(a) {
    return b.modal.impl.init(this, a)
  };
  b.modal.defaults = {
    appendTo: "body",
    focus: !0,
    opacity: 50,
    overlayId: "simplemodal-overlay",
    overlayCss: {},
    containerId: "simplemodal-container",
    containerCss: {},
    dataId: "simplemodal-data",
    dataCss: {},
    minHeight: null,
    minWidth: null,
    maxHeight: null,
    maxWidth: null,
    autoResize: !1,
    autoPosition: !0,
    zIndex: 1E3,
    close: !0,
    closeHTML: '<a class="modalCloseImg" title="Close"></a>',
    closeClass: "simplemodal-close",
    escClose: !0,
    overlayClose: !1,
    fixed: !0,
    position: null,
    persist: !0,
    modal: !0,
    onOpen: null,
    onShow: null,
    onClose: null
  };
  b.modal.impl = {
    d: {},
    init: function(a, h) {
      if (this.d.data) return !1;
      o = p && !b.support.boxModel;
      this.o = b.extend({}, b.modal.defaults, h);
      this.zIndex = this.o.zIndex;
      this.occb = !1;
      if ("object" === typeof a) {
        if (a = a instanceof b ? a : b(a), this.d.placeholder = !1, 0 < a.parent().parent().size() && (a.before(b("<span></span>").attr("id",
          "simplemodal-placeholder").css({
          display: "none"
        })), this.d.placeholder = !0, this.display = a.css("display"), !this.o.persist)) this.d.orig = a.clone(!0)
      } else if ("string" === typeof a || "number" === typeof a) a = b("<div></div>").html(a);
      else return alert("SimpleModal Error: Unsupported data type: " + typeof a), this;
      this.create(a);
      this.open();
      b.isFunction(this.o.onShow) && this.o.onShow.apply(this, [this.d]);
      return this
    },
    create: function(a) {
      this.getDimensions();
      if (this.o.modal && m) this.d.iframe = b('<iframe src="javascript:false;"></iframe>').css(b.extend(this.o.iframeCss, {
        display: "none",
        opacity: 0,
        position: "fixed",
        height: g[0],
        width: g[1],
        zIndex: this.o.zIndex,
        top: 0,
        left: 0
      })).appendTo(this.o.appendTo);
      this.d.overlay = b("<div></div>").attr("id", this.o.overlayId).addClass("simplemodal-overlay").css(b.extend(this.o.overlayCss, {
        display: "none",
        opacity: this.o.opacity / 100,
        height: this.o.modal ? j[0] : 0,
        width: this.o.modal ? j[1] : 0,
        position: "fixed",
        left: 0,
        top: 0,
        zIndex: this.o.zIndex + 1
      })).appendTo(this.o.appendTo);
      this.d.container = b("<div></div>").attr("id", this.o.containerId).addClass("simplemodal-container").css(b.extend({
        position: this.o.fixed ?
          "fixed" : "absolute"
      }, this.o.containerCss, {
        display: "none",
        zIndex: this.o.zIndex + 2
      })).append(this.o.close && this.o.closeHTML ? b(this.o.closeHTML).addClass(this.o.closeClass) : "").appendTo(this.o.appendTo);
      this.d.wrap = b("<div></div>").attr("tabIndex", -1).addClass("simplemodal-wrap").css({
        height: "100%",
        outline: 0,
        width: "100%"
      }).appendTo(this.d.container);
      this.d.data = a.attr("id", a.attr("id") || this.o.dataId).addClass("simplemodal-data").css(b.extend(this.o.dataCss, {
        display: "none"
      })).appendTo("body");
      this.setContainerDimensions();
      this.d.data.appendTo(this.d.wrap);
      (m || o) && this.fixIE()
    },
    bindEvents: function() {
      var a = this;
      b("." + a.o.closeClass).bind("click.simplemodal", function(b) {
        b.preventDefault();
        a.close()
      });
      a.o.modal && a.o.close && a.o.overlayClose && a.d.overlay.bind("click.simplemodal", function(b) {
        b.preventDefault();
        a.close()
      });
      n.bind("keydown.simplemodal", function(b) {
        a.o.modal && 9 === b.keyCode ? a.watchTab(b) : a.o.close && a.o.escClose && 27 === b.keyCode && (b.preventDefault(), a.close())
      });
      l.bind("resize.simplemodal orientationchange.simplemodal",
        function() {
          a.getDimensions();
          a.o.autoResize ? a.setContainerDimensions() : a.o.autoPosition && a.setPosition();
          m || o ? a.fixIE() : a.o.modal && (a.d.iframe && a.d.iframe.css({
            height: g[0],
            width: g[1]
          }), a.d.overlay.css({
            height: j[0],
            width: j[1]
          }))
        })
    },
    unbindEvents: function() {
      b("." + this.o.closeClass).unbind("click.simplemodal");
      n.unbind("keydown.simplemodal");
      l.unbind(".simplemodal");
      this.d.overlay.unbind("click.simplemodal")
    },
    fixIE: function() {
      var a = this.o.position;
      b.each([this.d.iframe || null, !this.o.modal ? null : this.d.overlay,
        "fixed" === this.d.container.css("position") ? this.d.container : null
      ], function(b, e) {
        if (e) {
          var f = e[0].style;
          f.position = "absolute";
          if (2 > b) f.removeExpression("height"), f.removeExpression("width"), f.setExpression("height", 'document.body.scrollHeight > document.body.clientHeight ? document.body.scrollHeight : document.body.clientHeight + "px"'), f.setExpression("width", 'document.body.scrollWidth > document.body.clientWidth ? document.body.scrollWidth : document.body.clientWidth + "px"');
          else {
            var c, d;
            a && a.constructor ===
              Array ? (c = a[0] ? "number" === typeof a[0] ? a[0].toString() : a[0].replace(/px/, "") : e.css("top").replace(/px/, ""), c = -1 === c.indexOf("%") ? c + ' + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"' : parseInt(c.replace(/%/, "")) + ' * ((document.documentElement.clientHeight || document.body.clientHeight) / 100) + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"', a[1] && (d = "number" === typeof a[1] ?
                a[1].toString() : a[1].replace(/px/, ""), d = -1 === d.indexOf("%") ? d + ' + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"' : parseInt(d.replace(/%/, "")) + ' * ((document.documentElement.clientWidth || document.body.clientWidth) / 100) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"')) : (c = '(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"',
                d = '(document.documentElement.clientWidth || document.body.clientWidth) / 2 - (this.offsetWidth / 2) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"');
            f.removeExpression("top");
            f.removeExpression("left");
            f.setExpression("top", c);
            f.setExpression("left", d)
          }
        }
      })
    },
    focus: function(a) {
      var h = this,
        a = a && -1 !== b.inArray(a, ["first", "last"]) ? a : "first",
        e = b(":input:enabled:visible:" + a, h.d.wrap);
      setTimeout(function() {
          0 < e.length ? e.focus() : h.d.wrap.focus()
        },
        10)
    },
    getDimensions: function() {
      var a = "undefined" === typeof window.innerHeight ? l.height() : window.innerHeight;
      j = [n.height(), n.width()];
      g = [a, l.width()]
    },
    getVal: function(a, b) {
      return a ? "number" === typeof a ? a : "auto" === a ? 0 : 0 < a.indexOf("%") ? parseInt(a.replace(/%/, "")) / 100 * ("h" === b ? g[0] : g[1]) : parseInt(a.replace(/px/, "")) : null
    },
    update: function(a, b) {
      if (!this.d.data) return !1;
      this.d.origHeight = this.getVal(a, "h");
      this.d.origWidth = this.getVal(b, "w");
      this.d.data.hide();
      a && this.d.container.css("height", a);
      b && this.d.container.css("width",
        b);
      this.setContainerDimensions();
      this.d.data.show();
      this.o.focus && this.focus();
      this.unbindEvents();
      this.bindEvents()
    },
    setContainerDimensions: function() {
      var a = m || r,
        b = this.d.origHeight ? this.d.origHeight : q ? this.d.container.height() : this.getVal(a ? this.d.container[0].currentStyle.height : this.d.container.css("height"), "h"),
        a = this.d.origWidth ? this.d.origWidth : q ? this.d.container.width() : this.getVal(a ? this.d.container[0].currentStyle.width : this.d.container.css("width"), "w"),
        e = this.d.data.outerHeight(!0),
        f =
        this.d.data.outerWidth(!0);
      this.d.origHeight = this.d.origHeight || b;
      this.d.origWidth = this.d.origWidth || a;
      var c = this.o.maxHeight ? this.getVal(this.o.maxHeight, "h") : null,
        d = this.o.maxWidth ? this.getVal(this.o.maxWidth, "w") : null,
        c = c && c < g[0] ? c : g[0],
        d = d && d < g[1] ? d : g[1],
        i = this.o.minHeight ? this.getVal(this.o.minHeight, "h") : "auto",
        b = b ? this.o.autoResize && b > c ? c : b < i ? i : b : e ? e > c ? c : this.o.minHeight && "auto" !== i && e < i ? i : e : i,
        c = this.o.minWidth ? this.getVal(this.o.minWidth, "w") : "auto",
        a = a ? this.o.autoResize && a > d ? d : a < c ? c : a : f ?
        f > d ? d : this.o.minWidth && "auto" !== c && f < c ? c : f : c;
      this.d.container.css({
        height: b,
        width: a
      });
      this.d.wrap.css({
        overflow: e > b || f > a ? "auto" : "visible"
      });
      this.o.autoPosition && this.setPosition()
    },
    setPosition: function() {
      var a, b;
      a = g[0] / 2 - this.d.container.outerHeight(!0) / 2;
      b = g[1] / 2 - this.d.container.outerWidth(!0) / 2;
      var e = "fixed" !== this.d.container.css("position") ? l.scrollTop() : 0;
      this.o.position && "[object Array]" === Object.prototype.toString.call(this.o.position) ? (a = e + (this.o.position[0] || a), b = this.o.position[1] || b) :
        a = e + a;
      this.d.container.css({
        left: b,
        top: a
      })
    },
    watchTab: function(a) {
      if (0 < b(a.target).parents(".simplemodal-container").length) {
        if (this.inputs = b(":input:enabled:visible:first, :input:enabled:visible:last", this.d.data[0]), !a.shiftKey && a.target === this.inputs[this.inputs.length - 1] || a.shiftKey && a.target === this.inputs[0] || 0 === this.inputs.length) a.preventDefault(), this.focus(a.shiftKey ? "last" : "first")
      } else a.preventDefault(), this.focus()
    },
    open: function() {
      this.d.iframe && this.d.iframe.show();
      b.isFunction(this.o.onOpen) ?
        this.o.onOpen.apply(this, [this.d]) : (this.d.overlay.show(), this.d.container.show(), this.d.data.show());
      this.o.focus && this.focus();
      this.bindEvents()
    },
    close: function() {
      if (!this.d.data) return !1;
      this.unbindEvents();
      if (b.isFunction(this.o.onClose) && !this.occb) this.occb = !0, this.o.onClose.apply(this, [this.d]);
      else {
        if (this.d.placeholder) {
          var a = b("#simplemodal-placeholder");
          this.o.persist ? a.replaceWith(this.d.data.removeClass("simplemodal-data").css("display", this.display)) : (this.d.data.hide().remove(), a.replaceWith(this.d.orig))
        } else this.d.data.hide().remove();
        this.d.container.hide().remove();
        this.d.overlay.hide();
        this.d.iframe && this.d.iframe.hide().remove();
        this.d.overlay.remove();
        this.d = {}
      }
    }
  }
});
#wrap ul li {
  border: 2px solid black;
  height: 50px;
  width: 100px;
  margin-left: 5px;
  overflow: hidden;
}
#wrap ul li div {
  text-align: center;
}
#wrap ul li {
  cursor: pointer;
}
#left_bar {
  height: 350px;
  width: 250px;
}
button {
  background: none repeat scroll 0 0 #AD7B05;
  color: #FFFFFF;
  border: medium none;
  margin-right: -14px;
  padding: 10px;
  cursor: pointer;
}
.shopp,
.cart-total {
  border: solid #ccc 1px;
  background: url(remove.png) center right no-repeat 5px;
  width: 260px;
}
div.shopp div.label {
  width: 130px;
  float: left;
}
div.shopp div.shopp-price {
  width: 70px;
  float: left;
}
#container {
  margin: 0 auto;
  padding-top: 20px;
  width: 800px;
}
#simplemodal-container {
  height: 360px;
  width: 600px;
  color: #bbb;
  background-color: #333;
  border: 4px solid #444;
  padding: 12px;
}
#simplemodal-container .simplemodal-data {
  padding: 8px;
}
#simplemodal-container code {
  background: #141414;
  border-left: 3px solid #65B43D;
  color: #bbb;
  display: block;
  font-size: 12px;
  margin-bottom: 12px;
  padding: 4px 6px 6px;
}
#simplemodal-container a {
  color: #ddd;
}
#simplemodal-container a.modalCloseImg {
  background: url(../light/img/basic/x.png) no-repeat;
  width: 25px;
  border: solid #ccc 1px;
  height: 29px;
  display: inline;
  z-index: 3200;
  position: absolute;
  top: -15px;
  right: -16px;
  cursor: pointer;
}
#simplemodal-container h3 {
  color: #84b8d9;
}
#basic-modal-content {
  display: none;
}
#simplemodal-overlay {
  background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://www.sethcraft.com/elle/include/jquery.livequery.js"></script>

<div>
  <div id="wrap" align="left">
    <ul>
      <li id="1">
        <br clear="all" />
        <div><span class="name">Ace</span>: $<span class="price">800</span> 
        </div>
      </li>
      <li id="2">
        <br clear="all" />
        <div><span class="name">Bat</span>: $<span class="price">500 </span>
        </div>
      </li>
      <li id="3">
        <br clear="all" />
        <div><span class="name">Cat</span>: $<span class="price">450</span>
        </div>
      </li>
    </ul>
    <br clear="all" />
  </div>
</div>

<div id='container'>
  <div id='content'>
    <div id='basic-modal'>
      <input type='button' name='basic' value='Basket' class='basic' />
    </div>

    <!-- modal content -->
    <div id="basic-modal-content">
      <div id="left_bar">
        <form action="#">
          <div class="cart-info"></div>
          <div class="cart-total">
            <b>Total Charges:</b> $<span>0</span>
            <input type="hidden" name="total-hidden-charges" id="total-hidden-charges" value="0" />
          </div>
          <div class="cart-quantity">
            <b>Total quantity:</b> #<span>0</span>
            <input type="hidden" name="total-hidden-quantity" id="total-hidden-quantity" value="0" />
          </div>
          <button type="submit" id="Submit">CheckOut</button>
        </form>
      </div>
    </div>

    <!-- preload the images -->
    <div style='display:none'>
      <img src='../light/img/basic/x.png' alt='' />
    </div>
  </div>
</div>