Bootstrap模态框相关的问题

来源：互联网发布：黄金现货交易软件编辑：程序博客网时间：2024/06/01 18:46

一、给bootstrap模态框上面的按钮添加点击事件，关闭模态框
这样会导致模态框是消失了，但是模态框后面的遮罩层还留在页面上，后来找了半天才发现是要在button上加上一个属性 data-dismiss=”modal” 加上后就不需要再额外添加点击事件

$("#cancel").click(function (){    $("#faultInfoModal").hide();});

<div id="faultInfoModal" class="modal fade tips-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">            <div class="modal-dialog" role="document">                <div class="modal-content">                    <div class="modal-header">                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>                        <h4 class="modal-title" id="myModalLabel">系统提示：</h4>                    </div>                    <div id="modalDeatils" class="modal-body">                    </div>                    <div class="modal-footer">                         <button id="cancel" type="button" class="btn btn-primary">确定</button>                    </div>                </div>            </div>        </div>

二、模态框上表单的键盘响应事件
之前在一个项目中被模态框上的键盘响应事件困扰了很久，因为我一直是用“确定”按钮绑定键盘回车事件，后来才发现并不是这样，应该是把表单输入框绑定键盘事件，在绑定的事件里面去响应按钮点击事件的函数，而不是把按钮直接绑定键盘事件，另外这里还有一个问题，绑定之前要先禁止回车触发表单提交

/* * 禁止回车触发表单提交 */$(document).keydown(function(event){       if (event.keyCode == 13) {             $('form').each(function() {                   event.preventDefault();             });      }});

/* * 在指定的输入框中绑定回车事件 */$("#passWord").keydown(function(e){    if(e.keyCode==13){        $("#confirmBtn").click();        event.preventDefault();    }});

该键盘相应事件不兼容火狐和IE浏览器，具体解决办法见http://blog.csdn.net/liu_mi_/article/details/78874213

<!-- 密码验证模态框 start -->        <div id="passwordConfirm" class="modal fade tips-modal  password-confirm" aria-labelledby="myModalLabel">            <div class="modal-dialog" role="document">                <div class="modal-content">                    <div class="modal-header">                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>                        <h4 class="modal-title" id="myModalLabel">系统提示：</h4>                    </div>                    <div id="confirmDetails" class="modal-body">                        <div id="tipsAgain" class="tips-again">                        </div>                        <form>                          <div class="form-group">                            <label id="dealInfo" for="recipient-name" class="control-label deal-info"></label>                            <input id="passWord" type="password" class="form-control" placeholder="请输入您的密码..." />                          </div>                        </form>                    </div>                    <div class="modal-footer">                        <h1 id="confirmTxt"></h1>                        <button id="confirmBtn" type="button" class="btn btn-primary">确定</button>                    </div>                </div>            </div>        </div>        <!-- 密码验证模态框 end -->

三、解决模态框隐藏后页面滚动条不显示的问题

function solveModalProblem(){    $("body").removeClass("modal-open");    $("body").removeAttr("style");}

阅读全文

0 0