javascript Modal Mobile（andoid，ios）

Posted 2021-05-03

<div id="modalApp" class="splash" style="<?= (!isset($_COOKIE['modalApp'])) ? '' : 'display:none;' ?>">
    <img class="splash-img" src="" alt="">
    <div class="splash-logo">
        <img src="/bitrix/templates/.default/img/splash/logo.png" alt="">
        <span><a href="https://site.ru">test.ru</a> для <span id="deviceOs">iPhone</span></span>
    </div>
    <a class="btn-splash-highlighted" href="#">Скачать приложение</a>
    <a tabindex="0" class="btn-splash" onclick="document.getElementById('modalApp').style.display = 'none';">Пропустить</a>
</div>

<? if (!isset($_COOKIE['modalApp'])) setCookie("modalApp", 'on', time() + 3600 * 24, '/', 'site.ru'); ?>

$(function () {
    if (device.iphone()) {
        $('#deviceOs').text('iPhone');
        $('.btn-splash-highlighted').attr('href', 'https://itunes.apple.com/ru/app/test/id11');
        $('.splash-img').attr('src', '/bitrix/templates/.default/img/splash/bg-ios.webp');
    }
    if (device.android()) {
        $('#deviceOs').text('Android');
        $('.btn-splash-highlighted').attr('href', 'https://play.google.com/store/apps/details?id=ru.test.test');
        $('.splash-img').attr('src', '/bitrix/templates/.default/img/splash/bg-android.webp');
    }

    if (!device.iphone() && !device.android()) {
        $('.splash').hide();
    }
})