我似乎搞不懂这个噩梦。所以我试图做一个篮子系统是包含在一个模态弹出框。当我让它保持原样(原始的篮子系统)时，效果很好。
当我把模态加入方程时，它就爆炸了。该列表将添加和合计，直到您尝试删除任何列表项。然后它删除了错误的金额，混淆了总数，这是一个大的…当你关闭模式窗口，并再次打开它，所有的项目回来从死!(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 = {}
}
}
}
});#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>问题是你的模态插件使用的一个选项:simplemodal。它是持久化选项:
persist [Boolean:false]在模态调用中持久化数据?只使用查找现有的DOM元素。如果为true，则数据将被交叉维护Modal调用，如果为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>