HyperCube/Pages/ModalAssets.razor

<div class="modal" 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/packet.svg" alt="">
                    <p>Цифровые активы</p>
                </div>
                <div class="modal__body__header__href">
                    <a href="">Balans</a>
                    <a href="">Swap</a>
                    <a href="">Liquidity</a>
                </div>
            </div>
            <div class="modal__body__container">
                <div class="modal__body__container__left">
                    <div class="modal__body__calc__balance__header">
                        <p>БАЛАНС</p>
                        <button class="btn_orange">История</button>
                    </div>
                    <div class="modal__body__calc__balance__numbers">
                        <div class="modal__body__calc__balance__numbers__name">
                            <p>Системы</p>
                        </div>
                        <div class="modal__body__calc__balance__numbers__value">
                            <div class="modal__body__calc__balance__numbers__value__item">
                                <p>100.890110</p>
                                <p>ETH</p>

                            </div>
                            <div class="modal__body__calc__balance__numbers__value__item">
                                <p>1000.89011</p>
                                <p>2DH</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal__body__calc__balance__numbers">
                        <div class="modal__body__calc__balance__numbers__name">
                            <p>Ваше</p>
                        </div>
                        <div class="modal__body__calc__balance__numbers__value">
                            <div class="modal__body__calc__balance__numbers__value__item">
                                <p>100.890110</p>
                                <p>ETH</p>

                            </div>
                            <div class="modal__body__calc__balance__numbers__value__item">
                                <p>1000.89011</p>
                                <p>2DH</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal__body__calc__balance__button">
                        <button class="btn_orange btn_center">Депозиты</button>
                        <button class="btn_orange btn_center">Вывод</button>
                    </div>
                </div>
                <div class="modal__body__container__right">
                    <p class="modal__body__calc__change__header">Обмен</p>
                    <p class="modal__body__calc__change__desc">Trade tokens in an istant</p>
                    <div class="modal__input__box" place="From" balanc='0.00000410' currency='ETH'>
                        <input type="text" class="modal__input">
                        <select type="select" class="modal__select">
                            <option>ETH</option>
                            <option>2DH</option>
                        </select>
                    </div>
                    <div class="modal__input__box" place="To" balanc='0.00000410' currency='2DH'>
                        <input type="text" class="modal__input">
                        <select type="select" class="modal__select">
                            <option>2DH</option>
                            <option>ETH</option>
                        </select>
                    </div>
                    <div class="modal__input__total">
                        <p>Price</p>
                        <div class="modal_input_total_value">
                            <p>1.000000050</p>
                            <p>2DH</p>
                        </div>
                    </div>
                    <div class="modal__input__button">
                        <button class="btn_orange btn_center">ОК</button>
                    </div>
                </div>
            </div>
        </div>
        <a href="" class="modal_close" @onclick="@Close">&#10006;</a>
    </div>
</div>

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

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

    private string modalDisplay = "none;";


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

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