Модальное изображение в iOs10 или старше и Android 5 - PullRequest
Новая
       27

Модальное изображение в iOs10 или старше и Android 5

0 голосов
/ 23 ноября 2018

ну, у меня есть веб-сайт для моего комикса.Но есть ошибка, которая появляется только в iOs 10 или более ранней версии, и Android 5 (только браузер по умолчанию).

Прежде всего, я должен уточнить, что я не первоначальный разработчик сайта, так что я не совсемЯ уверен, как это работает полностью, но я был разработчиком давным-давно, поэтому я могу в основном понимать коды.Я выделил модальный код (я тестировал его, поэтому ошибка все еще появляется)

Это HTML-код 

<!DOCTYPE html>

<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body style="background-color: blue">   
<section>
<article class="links_view" style="color: black;">
 <a href="#" id="zoom" class="zoom"><img src="ico-zoom.svg" alt="Ver" class="img-fluid"></a> 
</article>
</section>

<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Title" aria-hidden="true">
<div id="modal_dialog" class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
 <div class="modal-body">
    <img id="imagen_modal" src="img_pag_00002_G.png" alt="" class="img-fluid">

  </div>
</div>
</div>
<a href="#" class="close_modal" data-dismiss="modal" aria-label="Close">
<span class="fas fa-times"></span>
</a>
</div>  
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/funciones.js"></script>
</body>
</html>

Это код Css (estilos.css): 

@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Francois+One");
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700");
.modal-dialog{max-width:815px;}
.modal-dialog .modal-content{border-radius:0;}
.modal-dialog.imagen_horizontal{max-width:90%;}
.modal-dialog.imagen_horizontal .modal-content .modal-body{overflow:auto !important;white-space:nowrap !important;}
.modal-dialog.imagen_horizontal .modal-content .modal-body .img-fluid{max-width:none}

//close_modal is a black buttom to close the modal
.close_modal{position:absolute;top:26px;right:26px;}
.close_modal span{background-color:#000;border-radius:50%;color:#fff;font-size:1.1em;padding:11px 14px;-webkit-transition:.5s all;-moz-transition:.5s all;-o-transition:.5s all;-ms-transition:.5s all;transition:.5s all}
.close_modal:hover span{background-color:#fff;color:#000}

@media screen and (max-width:995px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none; }
.modal-dialog.imagen_horizontal{max-width:100%}
.close_modal{position:fixed;top:20px;right:20px;z-index:9999;}
.close_modal:hover span{background-color:rgba(0,0,0,0.8);color:#fff}}


@media screen and (min-width:768px) and (max-width:991px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none}}

@media screen and (min-width:992px) and (max-width:1199px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none}}



// This code was added to fix a another bug with newest ios, but the bug of this topic was already there before

@media screen and (max-width:767px){
#modal1{overflow-y: scroll !important;-webkit-overflow-scrolling: touch !important; no-body-scroll-fix !important;}}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#modal1 {
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
no-body-scroll-fix !important: ;
}
}

Это код JavaScript (funciones.js): 

$(document).ready(function(){
$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop != 0)
        $('#inicio').addClass("nav_scroll");
    else    
        $('#inicio').removeClass("nav_scroll");
});

//It activates when the scroll is more than 100px
$(window).scroll(function() {
    if ($(this).scrollTop() > 225) {
        $('a.scroll-top').fadeIn();
    } else {
        $('a.scroll-top').fadeOut();
    }
});

//Create animation when clic the buttom
$('a.scroll-top').click(function() {
    $("html, body").animate({scrollTop: 0}, 600);
    return false;
});

$('body').on('click', '.page-scroll a', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
});

//this buttom (zoom=a yellow buttom) show the modal 
$('#zoom').click(function() {        
    $('#modal1').modal('show');      
});

});

На странице у нас есть желтая кнопка (называемая «зумом»), когда вы нажимаете на нее, появляется большойизображение, вы можете прокрутить его пальцами, чтобы вы могли видеть все это.Это должно выглядеть следующим образом:

нормальный вид ссылки

Но ошибка в более старых ios и android5 (браузер по умолчанию) показывает высоту изображения в разрезе (но вы можете прокрутить егов любом случае):

просмотр ошибки ссылки

Я надеюсь, что вы можете помочь мне с этой проблемой, это единственное, что мне нужно исправить, чтобы запустить сайт.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...