Bootstrap模式没有正确打开。背景位于页面顶部,模态在页面内部不正确。它在Mac,iphone,android和PC上运行得非常好。但这只会导致Apple的iPad Pro出现问题。到目前为止,我已经尝试了一切,但它没有解决它。我正在分享下面的错误截图。
<div class="col-sm-6 m-t-sm" >
{% if artist.id == user.id%}
<div class="row row-sm dk" >
<a href="#" data-toggle="modal" data-target="#artistPlaylists" >
<h3 class="font-bold m-b padder-md">Playlists <span class="text-primary">{{artist.playlists.count}}</span>
<span class="text-sm m-t-sm pull-right">view all</span>
</h3></a>
</div>
<div id="artistPlaylists" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content ">
<div class="modal-header ">
<button type="button" class="close " data-dismiss="modal">×</button>
<h4 class="modal-title text-primary">Playlists
{%set temp = 0%}
{% for song in user.playlists %}
{%set temp = song.id%}
{%endfor%}
{%set temp = temp+1%}
<a href="" data-request="onNewPlaylist" data-request-data="val:'/playlist/playlistPage/{{temp}}'" onclick="changeUrl('/playlist/playlistPage/{{temp}}');$('.modal.in').modal('hide');$('body').removeClass('modal-open');$('.modal-backdrop').remove();" data-request-complete=" $('#artistPlaylists').modal('hide');$('.modal.in').modal('hide');$('body').removeClass('modal-open');$('.modal-backdrop').remove()" data-request-update="'pages-all/sidebar': '#nav','pages-home/playlist/playlistPage':'#currentPage'" >
<span class="text-sm m-t-sm m-l-sm">Add New <i class="icon icon-plus"></i></span></a>
</h4>
</div>
<div class="modal-body ">
<div class="row">
<div class="col-sm-12">
{% for song in user.playlists %}
<div class="col-xs-6 col-md-4 col-lg-3">
{% partial "components/playlistItem" songName=song.name songId=song.id songImage=song.image
songFile=song.filename songExtension=song.extension songAlbumId=song.id songUserName=song.artist.username
%}
<section class="panel panel-default pos-rlt clearfix">
<header class="panel-heading">
<ul class="nav nav-pills pull-right">
<li>
<a href="#" class="panel-toggle text-muted"><i class="fa fa-caret-down text-active"></i><i class="fa fa-caret-up text"></i></a>
</li>
</ul>
Preview
</header>
<div class="panel-body clearfix collapse">
{% if song.songs is empty%}
Empty Playlist
{% endif %}
{% for Psong in song.songs |slice(0, 10) %}
<p>
{{Psong.name}}
</p>
{% endfor %}
</div>
</section>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
{%endif%}
</div>
模态的背景位于页面顶部,禁用任何活动,并且内容之间显示模态。 抱歉质量不好的图片我无法访问ipad,而且是由其他人发送的。
答案 0 :(得分:0)
终于找到修复使用这个答案: https://stackoverflow.com/a/15780841/5704835 虽然仍然无法理解为什么这个问题是专门针对iPad专业版的,并且没有在任何其他设备或浏览器上找到它。