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">&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" 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">&times;</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;">&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=' + 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);

    })

}