Thymeleaf скрыть popup по-умолчанию

При открытии основной страницы, по-умолчанию, блок <div id="er"> виден в виде пустого прямоугольника. Есть ли возможность его сделать невидимым при открытии основной страницы. Что бы блок <div id="er"> был виден только при передачи наличии данных в ${error}.

<body>
<div class="menu">
    <a href="/main">Добавить </a><a href="/search">Поиск</a>
</div>
</br>
<div id="er">
    <div id="popup">
    <strong style="color: rgb(20, 85, 162);" th:each="err : ${error}" th:text="${err}"></strong>
    <p style="cursor: pointer;" onclick="document.getElementById('er').style.display='none';" >Закрыть</p>
</div>
</div>
</body>

и CSS

#er {
  background: #000;
  height: 100%;
  opacity: 0.9;
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0;
  left: 0;
}
 
#popup {
  background-color: #00f;
  height: 200px;
  position: fixed;
  top: 100px;
  left: 40%;
  color: #f00;
  width: 300px;
}

Ответы (1 шт):

Автор решения: Mcile

вы можете это сделать на серверной части или на клиентской - например на js прописав функцию

<div id="er" onload="var a = '${error}'; if(a){this.disabled = true;}">

или на сервере

<div id="er" <?php if($error){ echo 'disabled' }?> >
</div>

а если у вас шаблонизатор - так пользуйтесь его конструкциями и пишите в заголовке к вопросу именно название шаблонизатора

<div id="er" th:if="${error}">
</div>
→ Ссылка