bootstrap中的data-toggle模態框相關

一,點擊即打開
1,點擊按鈕

<a href="javascript:void(0)" class="btn btn-primary" data-toggle="modal" data-target="#test" onclick="toApiTestPage()">API測試工具</a>

2,模態框

 

<div class="modal fade" id="test" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width:1000px;">
        <div class="modal-content bgwhite">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fa fa-times-circle" aria-hidden="true"></i>
                </button>
                <h4 class="modal-title" id="myModalLabel2">API測試</h4>
            </div>
            <div class="modal-body requestDiv" style="height: 450px;overflow-y: auto">
                <ul class="ul-tab">
                    <li>
                        <strong>接口地址</strong>
                        <span id="apiUrl"></span>
                        <input id="requestApiUrl" type="hidden"/>
                    </li>
                </ul>
            </div>
            <div class="modal-footer center">
                <a href="javascript:void(0)" class="btn btn-primary" data-dismiss="modal">完成調試</a>
                <a href="javascript:void(0)" class="btn btn-default" data-dismiss="modal">取消</a>
            </div>
        </div>
    </div>
</div>

點擊1中的"API測試工具"即可打開彈窗

二,點擊的先調用js方法判斷是否要打開

1,點擊按鈕:相比一.1 去掉了[data-toggle="modal" data-target="#test"]

<a href="javascript:void(0)" class="btn btn-primary" onclick="toApiTestPage()">API測試工具</a>

2,彈窗不變

3,在方法toApiTestPage()中

function toApiTestPage(){
    if (滿足條件){
        //此時打開彈窗
        $("#test").modal("show");
    }else {
        $("#test").modal("hide");
    }
}