zoukankan      html  css  js  c++  java
  • 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="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");
        }
    }
  • 相关阅读:
    Infosec institute n00bs CTF writeup
    CTF学习之CODE
    ThinkPHP函数详解:C方法
    流程控制的替代语法
    Jquery DOM
    YII2 请求(request)
    YII2 运行概述(Overview)
    YII2 小部件(widgets)
    YII2 过滤器 filters
    YII2 随笔 视图最佳实践
  • 原文地址:https://www.cnblogs.com/cailijuan/p/10150719.html
Copyright © 2011-2022 走看看