如何防止背景滚动时,引导模式打开后,它应该来到正常的位置

How to prevent background scroll when bootstrap modal is open after that it should come to normal position

本文关键字:位置 滚动 背景 何防止 模式      更新时间:2023-09-26

我使用这个代码加载弹出窗口时,弹出窗口打开的背景应该是不可滚动的。请帮助。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"  >Open modal /button>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">      
    <div class="modal-dialog" role="document" style="width:340px;float:right;margin: 48px;">
    <div class="triangle"></div>
    <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>
    <h2 class="modal-title" id="exampleModalLabel">Select City</h2>
    </div>
    <div class="modal-body">
    <form>
    <div class="form-group">
    <div class="col-md-3"> <label for="recipient-name" class="control-label">Recipient:</label></div>
    <div class="col-md-9"><input type="text" style="border:1px solid gray;"></div>                
    </div>             
    </form>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Send message</button>
    </div>
    </div>
    </div>
    </div>
    <script>
    $('#exampleModal').modal({
    backdrop: 'static',
    keyboard: true
    })
    </script>

我使用了提供的代码,并在codepan中看到,没有滚动请您详细说明您的问题或提供所有代码。codepen .