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);

    })

}