Как показать полупрозрачный div в react?

#html #css #reactjs

Вопрос:

В настоящее время я работаю в проекте react. Существует страница сведений о товаре, которая отображается при нажатии на любой товар на странице почты (так же, как на странице продукта и сведений о продукте).

На этой странице сведений я хочу скрыть часть формы, когда пользователь не аутентифицирован, и показать кнопку входа в систему.

Недавно я столкнулся с тем, что статьи средней пары будут скрывать контент, если участник не входит в план подписки.

введите описание изображения здесь

То же самое я хочу реализовать в своем проекте. я могу скрывать контент на основе isAuth.

 function pageDetail({ auth }){
  return (
      <Actual content >
      { auth amp;amp; 
       <Form />
      }
      <Login-ui >
   )
}
 

Здесь мне нужно скрыть от 50% снизу и показать пользовательский интерфейс входа с непрозрачностью сверху (такой же, как на изображении выше).

Любые предложения были бы весьма признательны. Спасибо

Комментарии:

1. Вы можете легко достичь этого с некоторыми CSS . Речь идет не о реакции!

Ответ №1:

вы можете создать компонент входа в систему с той же высотой видимой страницы и поместить в этот компонент фон с линейным градиентом:

 background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%); 
 

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