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"  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" >Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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" 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">&times;</span>

</button>

<div class="modal-body">

<div 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" onclick="shareAddCart(1, this);">ADD TO CART</button>

<!-- Modal -->

<div class="modal fade" 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" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" >&times;</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, 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);

})

}