Кнопка больше не функционирует в окне «Политика cookie» с использованием Bootstrap 4.3.1 на сайте ASP.NET Core MVC. - PullRequest
Новая
       12

Кнопка больше не функционирует в окне «Политика cookie» с использованием Bootstrap 4.3.1 на сайте ASP.NET Core MVC.

0 голосов
/ 20 сентября 2019

После интеграции Bootstrap 4 в мой веб-проект ASP MVC Core и изменения некоторого HTML-кода в окне политики использования файлов cookie.Я заметил, что кнопка «принять» больше не работает.Кнопка есть, и вы можете нажать на нее, но она не отвечает.

Помимо изменения части HTML-кода для косметического внешнего вида, единственным другим изменением было удаление тега div, который определил класс контейнера.для текстового содержания.Перечисленный код JQuery остается без изменений.

Функция вызывается тегом, расположенным в файле _Layout.cshtml в проекте Visual Studio.Он функционировал до того, как были внесены изменения в код.

Любое позитивное понимание будет полезно.Особенно, если есть что-то, что я пропустил или выровнял. 

using Microsoft.AspNetCore.Http.Features

@{
    var consentFeature = Context.Features.Get<ITrackingConsentFeature>();
    var showBanner = !consentFeature?.CanTrack ?? false;
    var cookieString = consentFeature?.CreateConsentCookie();
}

@if (showBanner)
{
    <nav id="cookieConsent" class="navbar navbar-light fixed-bottom float-sm-left" 
         style="background-color:transparent" role="alert">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#cookieConsent .navbar-collapse">
                    <span class="sr-only">Toggle cookie consent banner</span>
                    <span class="navbar-toggler-icon"></span>
                </button>
                <span class="navbar-brand"><span class="text-info" aria-hidden="false"></span></span>
                <div class="collapse navbar-collapse" style="background-color:rgba(49, 67, 179, 0.80); color:lightgoldenrodyellow">
                    <div class="container-fluid">
                        <h4><strong>COOKIE AND PRIVACY POLICY </strong></h4>
                        <p class="navbar-text" style="color:yellow">
                            This web site uses cookies and other technologgy for features and functions to
                            be viewed and operate normaly. You can acknowledge the site uses these features
                            by clicking the "Accept" button to the right of this message window. To view the
                            sites "Cookie and Privacy" policy page, click on the "Cookie and Privacy
                            Information" button.
                        </p>
                        <p class="navbar-text" style="color:whitesmoke">
                            NOTE: Clicking on the "Accpt" button only acknowledges you have read this
                            this message and is not a condition for access to this site.
                        </p>
                    </div>
                <div class="nav-container float-right">
                    <a asp-controller="Home" asp-action="Privacy" class="btn btn-info navbar-btn">Cookie and Privacy Information</a>                  
                    <button type="button" class="btn btn-light navbar-btn" data-cookie-string="@cookieString">Accept</button>
                </div>
            </div>
    </nav>
    <script>
        (function () {
            document.querySelector("#cookieConsent button[data-cookie-string]").addEventListener("click", function (el) {
                document.cookie = el.target.dataset.cookieString;
                document.querySelector("#cookieConsent").classList.add("hidden");
            }, false);
        })();
    </script>
}

1 Ответ

0 голосов
/ 20 сентября 2019

Похоже, что добавление hidden класса не удалось.Если вы хотите скрыть навигацию cookieConsent после нажатия кнопки «Принять», вы можете попробовать следующие два подхода:

  1. добавить несколько CSS для класса «скрытый» в пути wwwroot/css/site.css,Перечисленный код JQuery остается без изменений. 

    .hidden {
   display: none;
 }

  2. измените JQuery, как показано ниже: 

    document.querySelector("#cookieConsent").setAttribute("hidden","true");
...