Bootstrap 模式对话框在通过 JQuery 打开时自动将浏览器滚动到顶部

Question

我正在打开一个删除确认 bootstrap 模式对话框，一切都很好，但是当我通过 jquery 打开它时，它会将浏览器滚动到我想要限制的顶部。当我 open/close 模型 window 时，我想要相同的浏览器位置。我正在使用 bootstrap v 3.1.1, jquery 1.12.4, ASP.NET MVC5

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

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");
        }

Answer 1

您需要停止锚标记的默认行为，因为将 href 设置为 # 浏览器会滚动到页面顶部。你可以像这样写你的js函数：

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

你从哪里打电话应该是这样的：

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

Bootstrap 模式对话框在通过 JQuery 打开时自动将浏览器滚动到顶部

Bootstrap Modal Dialog is auto scroll browser to top when open through JQuery

asp.net-mvc

jquery

modal-dialog

twitter-bootstrap-3