• bootstrap 模态框


    <%-- 自定义选择工作表 弹出框--%>
    <div class="modal fade" id="createFileMModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="height: 200px;" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createFileTitle">输入工作表名称</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="fileName" class="col-form-label">工作表名称:</label>
                            <input type="text" autofocus class="form-control" id="fileName">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <%--        <button type="button" class="btn btn-primary" id="btnclosemodel"  data-dismiss="modal">关闭</button>
                           --%>
                    <button type="button" class="btn btn-primary" id="btnclosemodel">确定</button>
    
                </div>
            </div>
        </div>
    </div>
    <%--自定义选择工作表    弹出框  end--%>

    1、以上是模态框代码

    2、调用模态框: 调用的元素需要添加  data-toggle=“modal”,如果需要一点击就显示模态框  需要 data-target="#adminModal" 就可以了

    3、js控制模态框显示 不要添加data-target。

        $('#createFileMModal').modal("show");

    4、设置模态框的高度  在 class="modal-dialog" 中设置样式 style="height: 200px;"

  • 相关阅读:
    Linux ps 命令获取查询结果中的单列信息
    nowcoder(牛客网)普及组模拟赛第一场 解题报告
    Subway Pursuit (二分)(交互题)
    nowcoder(牛客网)OI测试赛2 解题报告
    NOIP提高组题目归类+题解摘要(2008-2017)
    CYJian的水题大赛2 解题报告
    数独问题
    题解 UVA11300 【Spreading the Wealth】
    实验吧web题:
    简单的sql语句
  • 原文地址:https://www.cnblogs.com/luo1240465012/p/11215114.html
Copyright © 2020-2023  润新知