Модальная проблема Bootstrap на Safari / iOS / iPhone

Bootstrap modal fade отлично работает в Chrome/Internet Explorer, но он не работает на iPhone / Safari. Есть ли у кого-то решение этой проблемы? 

<div class="modal fade" id="notice" tabindex="-1" role="dialog" aria-labelledby="notice" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img src="https://random.hellyer.kiwi/files/2013/11/wiley-coyote-help.jpg" />
                | wait, I'm updating...
            </div>
        </div>
    </div>
</div>

<script>
    $('#notice').modal('show');
    setTimeout(function () {
        $('#notice').modal('hide');
    }, 3000);
</script>

https://jsfiddle.net/mmbtfhaf/

9
css iphone mobile-safari twitter-bootstrap

3 ответов

у меня была такая же проблема в эти дни и выяснил, что safari на iOS работает по-разному с другими браузерами в отношении одной вещи. Модальное окно не отображается в safari, но во многих других браузерах, когда отсутствует href="#".

не работает на Safari / iOS, но другие браузеры:

<li><a data-toggle="modal" data-target="#testModal">Modal</a></li>

работа в Safari / iOS и других браузерах:

<li><a href="#" data-toggle="modal" data-target="#testModal">Modal</a></li>

20

Я нашел этот ответ, который решил проблему для меня. Проблема в том, что iOs не понимает, что тег является кликабельным.

Создайте стиль CSS следующим образом:

.clickable {
    cursor: pointer;
}

в вашем модальном коде добавьте класс clickable:

<li><a data-toggle="modal" class="clickable" data-target="#modalDelete">Delete</a></li>
7

Если вы сделаете тег " a " и "button" вместо этого, он работает как в safari IOS, так и в настольных браузерах.

<li><button data-toggle="modal" data-target="#testModal">Modal</button></li>
3