Bootstrap 模态对话框是通过 JQuery 打开时自动滚动浏览器到顶部 [英] Bootstrap Modal Dialog is auto scroll browser to top when open through JQuery

查看：58
本文介绍了Bootstrap 模态对话框是通过 JQuery 打开时自动滚动浏览器到顶部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在打开一个删除确认引导模式对话框，一切正常，但是当我通过 jquery 打开它时，它会将浏览器滚动到我想要限制的顶部.当我打开/关闭模型窗口时，我想要相同的浏览器位置.我正在使用 bootstrap v 3.1.1、jquery 1.12.4、ASP.NET MVC5

我在网上搜索过，但没有找到我面临的相同问题

引导模式<div class="modalfade" id="DeleteConfirmation"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><a href="#" class="close" data-dismiss="modal">&times;</a><h4>删除记录</h4>

<div class="modal-body"><h4>您确定要删除此记录吗.</h4>

<div class="modal-footer"><a href="#" class="btn btn-primary" data-dismiss="modal" id="r">取消</a><a href="#" class="btn btn-danger" onclick="ConfirmDelete()">确认</a>

jquery打开模态对话框:var DelRecord = 函数 (TransactionId) {$("#TrnId").val(TransactionId);$("#DeleteConfirmation").modal("show");}

解决方案

您需要停止锚标记的默认行为，因为 href 设置为 # 浏览器滚动至页面顶部.您可以编写如下 js 函数:

var DelRecord = function (TransactionId,event) {event.preventDefault();$("#TrnId").val(TransactionId);$("#DeleteConfirmation").modal("show");}

从你打电话的地方应该是这样的:

<a onclick="DelRecord(transactionId,event);">Delete</a>

I am opening a delete confirmation bootstrap modal dialog, everything is fine but when I open it through jquery, it scrolls the browser to top which I want to restrict. I want the same browser position when I open/close model window. I am using bootstrap v 3.1.1, jquery 1.12.4, ASP.NET MVC5

I have searched on the web but could not find the same problem that I am facing

bootstrap modal 

<div class="modal fade" id="DeleteConfirmation">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h4>Delete Record</h4>
                </div>
                <div class="modal-body">
                    <h4>Are You Sure To Delete This Record.</h4>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-primary" data-dismiss="modal" id="r">Cancel</a>
                    <a href="#" class="btn btn-danger" onclick="ConfirmDelete()">Confirm</a>
                </div>
            </div>
        </div>
    </div>
</div>


jquery to open modal dialog:

  var DelRecord = function (TransactionId) {
            $("#TrnId").val(TransactionId);
            $("#DeleteConfirmation").modal("show");
        }

解决方案

You need to stop the default behavior of anchor tag as with href set to # the browser scrolls to top of page. You can write you js function like:

var DelRecord = function (TransactionId,event) {
            event.preventDefault();
            $("#TrnId").val(TransactionId);
            $("#DeleteConfirmation").modal("show");
        }

and from where you are calling should be like:

<a onclick="DelRecord(transactionId,event);">Delete</a>

这篇关于Bootstrap 模态对话框是通过 JQuery 打开时自动滚动浏览器到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆