bootstrap模态框弹窗的几种方式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
bootstrap模态框弹窗的⼏种⽅式。
1、通过设置标签的属性，data-toggle="modal"、data-target="#isModal"。
<!-- Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#isModal">modal</button>
<!-- Modal -->
<div class="modal fade" id="isModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
2、通过 jquery动态设置图⽚弹窗 data-toggle="modal" data-target="" 属性。
<!-- html 部分 -->
<div data-img="/images/sp/pro_disc/eng/profile.png" class="cursor-pointer table-img" data-toggle="modal" data-
target="" onclick="TableImgShow(event)">Section View</div>
<!-- 模态框表格显⽰图⽚ -->
<div class="modal fade p-0 m-0" id="exampleModalTAB" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered " role="document">
<div class="modal-content mx-3">
<button type="button" class="close model-colse" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="model-colsebutton">×</span>
</button>
<div class="modal-body">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block series-tableImg mx-auto py-3 mw-100" src="" alt="First slide">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- js 部分 -->
function TableImgShow(event) {
let img = event.srcElement.dataset.img;
$(event).css('color','#0070ff');
$('.series-tableImg').attr('src', img);
event.srcElement.dataset.target = '#exampleModalTAB';
}
3、通过ajax 判断返回参数 modal弹窗。
<button class="btn btn-primary" style="width: 200px" onclick="shareAddCart(1, this);">ADD TO CART</button>
<!-- Modal -->
<div class="modal fade" id="Hint" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header border-0 pb-0">
<button type="button" class="close pb-0 pt-2" style="height:50px" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="font-size: 40px;display: block;">×</span></button>
</div>
<div class="modal-body productStatus">
<p class="plate-title text-center font-30">弹窗显⽰</p>
<p class="text-center product_con">
这⾥是弹窗显⽰的内容！
</p>
</div>
</div>
</div>
</div>
<!-- js 部分 -->
function shareAddCart(Id, that){
$.get('/s/add-num?id=' + Id, function (data){
data = JSON.parse(data);
if (data == 'success') {
$(that).html('ADD TO CART');
$('.cart-success').html('<i class="fa text-success fa-check"></i> Added to cart! <a class="color-0070ff text-decoration" href="/cart.html" target="_blank">View cart</a>').show();
} else {
$(that).html('ADD TO CART');
$("#Hint").modal(); //调⽤modal 模态框
}
}).fail(function (err){
console.log(err);
})
}。