如何解决从另一个模态创建模态时,滚动效果不起作用
在我的角度应用程序中,使用引导程序在另一个模态内创建了一个模态。首先,您将看到用于加载第一个模态的按钮。现在您可以看到滚动效果。但是如果加载第二个模态并关闭它,则第一个模态的滚动效果将不再起作用。我该如何解决这个问题? See the example here
这是代码示例,您还可以看到上面的链接:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Click Me</a>
<div class="modal" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div><div class="container"></div>
<div class="modal-body">
Scrollin effect for this modal is working at the beginning.
But if load the 2nd modal and close it,then this scrolling effect is not working anymore.
--------------------------------------------------------
Scrollin effect for this modal is working at the beginning.
But if load the 2nd modal and close it,then this scrolling effect is not working anymore.
--------------------------------------------------------
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
Content for the dialog / modal goes here.
Content for the dialog / modal goes here.
Content for the dialog / modal goes here.
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>
</div>
解决方法
基本上,有两种解决方法:
- 添加
.modal-dialog-scrollable
to your modal仅使其内容可滚动,而不是整个容器。看看this fiddle。
<div class="modal" id="myModal">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
...
</div>
</div>
- 使用属于this answer的“旧”解决方案。看看this fiddle:
$(document).on('hidden.bs.modal','.modal',function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
祝你好运!
,似乎是,引导程序消除了y方向的溢出。因此,这种解决方案对我有用:
.modal {
overflow-y: auto !important;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。