zoukankan      html  css  js  c++  java
  • bootstrap中模态框、模态框的属性

    工作中有需要用到模态框的可以看看

    <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnCancel">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            前台菜单管理
                        </h4>
                    </div>
    
                        <div class="modal-body">
                            <div>
    
                                <table width="100%" border="0" class="userCon_2">
                                    <tr>
                                        <th width="30%">名称:</th>
                                        <td width="70%">
                                            <input type="text" name="Name" class="form-control" style="border-radius:3px; 220px;" id="txtName" required="" aria-required="true">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>动作类型:</th>
                                        <td>
                                            <select class="selectpicker show-tick" id="txtType" style="height: 30px;  220px;" name="Type">
                                                <option value="view">view</option>
                                                <option value="click">click</option>
                                            </select>
                                        </td>
                                    </tr>
    
                                    <tr>
                                        <th>路径:</th>
                                        <td>
                                            <input type="text" name="Url" class="form-control" style="border-radius:3px; 220px;" id="txtUrl" required="" aria-required="true" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>排序:</th>
                                        <td>
                                            <input type="text" name="Rank" class="form-control" style="border-radius:3px; 220px;" id="txtRank" />
                                            <input type="hidden" name="MainMenuGuid" value="" id="txtMainMenuGuid" />
    
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer" style="border-top:none;">
                            <button type="button" class="btn btn-default" data-dismiss="modal" id="btnClose">关闭</button>
                            <button type="submit" class="btn btn-primary" id="btnSave">保存</button>
                        </div>
    
    
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

    其中模态框有个属性可以避免点击遮罩层导致模态框关闭。就是div中设置的 data-backdrop="static"。这样可以避免在模态框中输入内容时突然的误操作导致模态框关闭。

    另外还有一个属性:data-keyboard="false"。此举是设置按下ESC退出键无效。同样是为了避免突然的误操作导致模态框关闭。

    <div id="toolbar" class="btn-group">
                <button id="btn_add" type="button" class="btn btn-newAdd" data-toggle="modal" data-target="#userModal">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
                <button id="btn_edit" type="button" class="btn btn-newAdd">
                    <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改
                </button>
                <button id="btn_delete" type="button" class="btn btn-newAdd">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button>
    
    </div>

    其中按钮属性 data-toggle="modal" data-target="#userModal" 是打开模态框。

  • 相关阅读:
    BZOJ 3205 [Apio2013]机器人 ——斯坦纳树
    BZOJ 3782 上学路线 ——动态规划 Lucas定理 中国剩余定理
    HDU 1423 Greatest Common Increasing Subsequence ——动态规划
    BZOJ 3309 DZY Loves Math ——莫比乌斯反演
    POJ 1038 Bugs Integrated, Inc. ——状压DP
    POJ 3693 Maximum repetition substring ——后缀数组
    POJ 2699 The Maximum Number of Strong Kings ——网络流
    POJ 2396 Budget ——有上下界的网络流
    BZOJ 4650 [Noi2016]优秀的拆分 ——后缀数组
    源码安装python
  • 原文地址:https://www.cnblogs.com/hmYao/p/6408997.html
Copyright © 2011-2022 走看看