主页 / 问题 / 746256
Accepted
epsilon
Asked:2020-11-18 14:21:29 +0000 UTC2020-11-18 14:21:29 +0000 UTC

打开模态窗口

  • 772

实际上问题是，当在页面上打开一个模式窗口（从引导程序）时，页面滚动被翻译到最顶部。你怎么能摆脱这个？

模态窗口

<div class="modal fade" id="modalView" tabindex="-1" role="dialog" aria-labelledby="modalView" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" >
        <div class="modal-content" style="background: linear-gradient(#1A1E21, #1A1E21, #1A1E21);; color: #fff;">
            <div class="modal-header"">
                <h5 class="modal-title" id="modalViewTitle"></h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close" >
                    <span aria-hidden="true" style="color: #fff !important;">&times;</span>
                </button>
            </div>
            <div class="modal-body" >
                <div class="container-fluid text-center">
                    <img src="" alt="photo" width="90%" height="auto" id="modalViewImage">
                    <p id="modalViewText" style="margin-top: 20px; font-size: 20px;">

                    </p>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

不管有没有影响，不过我也会贴出来

<html lang="en" style='overflow-x: hidden;'>

模态窗口通过js打开

$(".view").click(function() {
    $("#modalView").modal('show');
}
html

1 个回答

  1. Best Answer

    选项1

    当模式打开时，该类modal-open设置 tag <body>。这个类被分配overflow: hidden;给标签body。将此添加到 css 以覆盖 bootstrap.css 样式：

    body.modal-open {
    overflow: visible;
}

    选项 2

    看着你打开一扇窗户。如果通过标签<a href="#myModal">，那么它会滚动，试试这个：

    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Кнопка
</button>

    选项 3

    $('ваш класс').click(function ($e) {
    $e.preventDefault();
});
    • 1

相关问题