HyperCube/Pages/ModalRating.razor

<div class="modal fadein" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow: hidden">
    <div class="modal-container">
        <div class="modal__body">
            <div class="modal__body__header">
                <div class="modal__body__header__info">
                    <img src="img/raiting.svg" alt="">
                    <p>Ваш рейтинг</p>
                </div>
            </div>
            <div class="modal__body__container modal__body__container_aligncenter">
                <div class="modal__body__container__left modal__body__container__left_blackborder">
                    <p class="modal__raiting__info">Повышай свой рейтинг участвуя на мероприятиях 2dh</p>
                    <p class="modal__raiting__info modal__raiting__info_margin">Что дает высокий рейтинг на 2dh</p>
                    <p class="modal__raiting__info">
                        1. Попадание пользователя
                        в рассылки пригласительных на участие в Цифровых хакатонах
                    </p>
                    <p class="modal__raiting__info">
                        2. Получение допуска
                        к дополнительным файлам и функциям
                    </p>
                    <p class="modal__raiting__info">3.Получение статус а эксперта.</p>
                </div>
                <div class="modal__body__container__right modal__body__container__right_blackborder">
                    <p class="modal__raiting__header">Ваш рейтинг</p>
                    <p class="modal__raiting__value">133 mmr</p>
                    <button class="modal__raiting__button btn_orange">Таблица рейтинга</button>
                </div>
            </div>
        </div>
        <a class="modal_close" style="cursor:pointer" @onclick="@Close">&#10006;</a>
    </div>
</div>

@code {
    [Inject]
    public IJSRuntime JsRuntime { get; set; }

    [Parameter]
    public RenderFragment Title { get; set; }

    string modalDisplay = "none;";


    public void Open()
    {
        JsRuntime.InvokeVoidAsync("BodyScroll", false);
        modalDisplay = "block;";
    }

    public void Close()
    {
        JsRuntime.InvokeVoidAsync("BodyScroll", true);
        modalDisplay = "none";
    }
}