Javascript iOS 8.1.3上的引导模式问题
我仅在iOS 8.1.3版本的引导模式中遇到问题。我有垂直滚动可在模式内div。当我触摸模式背景,然后尝试滚动该div中的文本时,文本有时会消失或冻结,几秒钟后,我可以再次滚动。这有点奇怪。任何帮助都是值得的Javascript iOS 8.1.3上的引导模式问题,javascript,ios,css,twitter-bootstrap-3,Javascript,Ios,Css,Twitter Bootstrap 3,我仅在iOS 8.1.3版本的引导模式中遇到问题。我有垂直滚动可在模式内div。当我触摸模式背景,然后尝试滚动该div中的文本时,文本有时会消失或冻结,几秒钟后,我可以再次滚动。这有点奇怪。任何帮助都是值得的 谢谢 你能用小提琴来演示这个问题吗?我想这可能会有帮助,谢谢cojomojo的回复,我已经尝试了你提供的链接。我也试过这个,但不太管用。这是我的代码。有解决方案吗?解释一下它是如何工作的,以及它是如何支持这个问题的。嗨,查马斯,引导模式在移动设备上总是有问题,尤其是在ios上。我发现这是因
谢谢 你能用小提琴来演示这个问题吗?我想这可能会有帮助,谢谢cojomojo的回复,我已经尝试了你提供的链接。我也试过这个,但不太管用。这是我的代码。有解决方案吗?解释一下它是如何工作的,以及它是如何支持这个问题的。嗨,查马斯,引导模式在移动设备上总是有问题,尤其是在ios上。我发现这是因为一些与职位相关的CSS。所以我做了一些自己的代码,它完全具有模态行为,但它是一个独立于主体层的层,在跨浏览器和多设备上完美地工作,您可以在这一层上实现任何东西。
<section class="parent">
<h1>Modal a Different Way <small>Using CSS and JS</small></h1>
<div class="child">
<button class="cakeModalJS">Click Me!</button>
<p>I have same behaviour what you have using to Modal concept except common UI issues.</p>
</div>
<div class="cake-modal cake-hidden">
<div class="modal-body">
<button class="modal-close">x</button>
<h3>
Look I'm your inbuild Modal module
</h3>
</div>
</div>
<footer>
<p>Cake Modal by Color Cake. All Right Recieved © 2018</p>
</footer>
</section>
$('.cakeModalJS').click(function(){
$('.cake-modal').removeClass('cake-hidden');
});
$('.cake-modal').on('click', function(e) {
if (e.target !== this)
return;
$('.cake-modal').addClass('cake-hidden');
});
$('.modal-close').click(function(){
$('.cake-modal').addClass('cake-hidden');
});
$color1: #5b5b5b;
$color2: #fff;
@mixin btn-gray {
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
border: 1px solid $color1;
cursor: pointer;
background: $color2;
&:hover{
-moz-box-shadow: inset 1px 0px 4px $color1;
-webkit-box-shadow: inset 1px 0px 4px $color1;
box-shadow: inset 1px 0px 4px $color1;
text-shadow: 0.01px 0.01px 0.01px rgba(91, 91, 88, 0.4);
}
}
.cake-hidden{
display: none;
}
.parent{
position: relative;
padding: 10px;
height: 95vh;
border: 2px solid $color1;
text-align: center;
color: $color1;
z-index: 1;
h1{
margin-top: 0;
border-bottom: 1px solid;
small{
font-size: 40%;
}
}
}
.child{
text-align: left;
button{
border: 1px solid $color1;
padding: 10px;
cursor: pointer;
@include btn-gray;
}
p{
display: inline;
color: $color1;
}
}
.cake-modal{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: rgba(91, 91, 88, 0.2);
z-index: 2;
.modal-body{
position: absolute;
width: calc(100vw/2);
height: calc(100vh/2);
background: $color2;
z-index: 3;
-moz-box-shadow: 1px 0px 4px $color1;
-webkit-box-shadow: 1px 0px 4px $color1;
box-shadow: 1px 0px 4px $color1;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: left;
padding:10px;
h3{
margin-top: 0;
}
.modal-close{
float: right;
padding: 8px 8px;
line-height: 10px;
font-weight: 600;
@include btn-gray;
}
}
}
footer{
position: absolute;
color:$color2;
background: $color1;
padding: 10px;
right: 0;
left: 0;
bottom: 0;
p{
font-size: 10px;
}
}