<script type="text/javascript">
$(window).on('load',function(){
$('#loginerrormodal').modal('show');
});
</script>
<div class="modal fade" tabindex="-1" role="dialog" id="loginerrormodal">
<div class="modal-dialog" role="document">
<div class="modal-content bg-white">
<div class="modal-header">
<h5 class="modal-title">...</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
当我在移动设备上运行模式时,黑色背景没有响应: (页面加载时的模式操作,所以我没有启动它的按钮)
我该如何解决?
答案 0 :(得分:1)
在您提供的实时版本中可能会看到,element
超出了设备的总数width
,这干扰了modal
。
使用类card bg-white mx-auto
查找div,并删除inline style
的{{1}}(用于移动设备断点(480px))。
如果这不可能,则可以使用width: 30rem
创建media query
来覆盖!important
,如下所示:
inline style
希望有帮助。
答案 1 :(得分:0)
我对此进行了修正:
.modal-backdrop {
height: 100%;
width: 100%;
}