Bootstrap里如何动态创建一个popover或者说如何创建一个弹出层。比如点击购买按钮,创建一个层,提示购买成功与否的结果,点确定关闭。
popover是不是必须依赖html控件?Html代码如下
<button id="add-cart" type="button" class="btn btn-warning btn-lg" data-loading-text="处理中..." onclick="addCart(1234)">
<span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button>
<span id="add-cart-alert"></span>
js代码如下:
function addCart(id) {
if (!checkSelectSpec()) {
return false;
}
$("#add-cart").button('loading');
var url = "/WebHandler/ShopCartHandler.ashx?t=add&id=" + id;
$.getJSON(url, function (data) {
if (data.errmsg == '') {
$("#add-cart").button('reset');
//alert("商品已成功添加到购物车!");
$('#add-cart-alert').popover({title:'购物车状态',content:'商品已成功添加到购物车!',delay: { show: 500, hide: 100 }});
}
else {
$("#add-cart").button('reset');
alert("商品添加到购物车失败!"+data.errmsg);
//$('#add-cart').popover({title:'购物车状态',content:'商品添加到购物车失败!'})
}
});
};
点击购买无任何反应,页面里是否要初始化popover?
一种简单的方法就是自己写 popover 的 html,并且在需要显示 popover 的地方控制内容变化。
$("#your-button").popover({
html: true,
content: '<div id="content">...</div>'
})
.click(function() {
$("#content").text('YOUR CONTENT');
});
P.S. 最新的 bootstrap 3 的 popover(options)
初始化参数里提供了修改默认 popover template html 的选项,我没有实际用过不确定有没有坑,看起来会比上面的方法更加优雅。