Как заставить Bootstrap модальное пребывание на экране без jQuery in. NET? - PullRequest
Новая
       30

Как заставить Bootstrap модальное пребывание на экране без jQuery in. NET?

0 голосов
/ 29 апреля 2020

Теперь у меня странная настройка на мой взгляд. Это форма с bootstrap вкладками, которая позволяет пользователю переключаться между «карточками» в главной веб-форме. 

<form asp-controller="Home" asp-action="Form" method="post">
    <!--Summary Modal-->
    <div class="modal" tabindex="1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Summary</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Comments</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="card">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="pill" href="#rfi">RFI</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#search">Knowledge</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <!--RFI card-->
            <div id="rfi" class="card container tab-pane active">
                <div class="card-body">
                    <input type="text" name="FirstName" id="FirstName" placeholder=" ">
                </div>
            </div>
            <!--Knowledge card-->
            <div id="search" class="card container tab-pane active">
                <div class="card-body">
                    <input type="text" name="search" id="Search" placeholder=" ">
                </div>
            </div>
        </div>
    </div>
</form>

Мне нужно, чтобы модал отображался в правом верхнем углу и всегда был на экране, даже если пользователь переключает вкладки. Они должны иметь возможность заполнить их, а затем нажать кнопку отправки в модале, чтобы отправить всю форму.

Однако, каждый раз, когда я строю свой проект, модал нигде не найти. Я даже не могу найти его с помощью инструментов разработчика. Я предполагаю, что это должно быть вызвано кнопкой, как другие модалы здесь.

Некоторые пользователи онлайн говорят, что вы можете использовать jQuery, чтобы показать модальный при загрузке экрана, но мы пытаемся не допустить jquery в этот проект и использовать машинопись. Могу ли я сделать это без него, или jQuery единственный способ?

1 Ответ

0 голосов
/ 29 апреля 2020

Оказывается, вам нужно удалить tabindex="1" из первого div модального элемента и изменить его класс на 'container', например: 

  <div class="container" role="dialog">
...