Лучший способ отобразить всплывающий контейнер с большим количеством данных

Question

Итак, я занимаюсь разработкой веб-сайта (ASP.Net Core MVC) и пытаюсь отобразить контейнер с потенциально большим количеством данных внутри, как только я нажимаю на кнопку, чтобы увидеть изображение.

В каждой строке есть кнопка добавления. На странице будет одновременно всего около 10-30 кнопок. Как только вы нажмете на такую ​​кнопку, показанное всплывающее окно должно отобразиться рядом с нажатой кнопкой. Как вы можете видеть на картинке, всплывающее окно может содержать много данных. И эти данные могут отличаться от каждой строки.

Каков наилучший подход?

1. Поместите каждое из этих всплывающих окон уже в HTML и нажмите display: block и display: none при наведении курсора.
2. С помощью jQuery и с использованием метода append, вызовите всплывающее окно рядом с ним и удалите его после зависания.

Или есть даже другой подход к этому?

Почему я спрашиваю?

Меня беспокоит производительность и время загрузки.

Answer 1

По моему мнению, у обоих подходов есть свои недостатки и недостатки.

Для подхода 1: это приведет к более медленному времени начальной загрузки, но будет быстрее, чем при подходе 2, когда он загружен.

Подход 2: Недостатком является то, что для этого нужно загрузить jQuery.Я не знаю, используете ли вы это на протяжении всего проекта.Но только для этого это было бы немного излишним.Однако начальное время загрузки может быть быстрым, и вы можете использовать AJAX для загрузки всех данных, когда они нажимаются.

Я не программист с 10-летним опытом, так что этот ответ является чисто моим мнением и моим мнением об этом.

Надеюсь, что это откроет дискуссию!