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