Решил сделать анимацию всплывающей кнопки, которая, в последствии, превращается в модальное окно при нажатии и при "свертывании" остается как красная кнопка.
При помощи нейронки и собственных знаний подогнал примерно такой код:
Разместил я его под секцией в PAGE CONTAINER:
. Но никакого результата не получил.
Знаю, что я не супер шарящий в этом, поэтому и обращаюсь сюда.
При помощи нейронки и собственных знаний подогнал примерно такой код:
Код:
<xf:if is="!$xf.visitor.user_id">
<div id="registerPrompt" class="register-prompt">
<button id="openRegisterModal" class="register-button">
<i class="fa fa-exclamation-circle"></i> Зарегистрируйтесь
</button>
</div>
<div id="registerModal" class="register-modal" style="display: none;">
<div class="modal-content">
<span id="closeModal" class="close-button">×</span>
<h2>Присоединяйтесь к нашему сообществу!</h2>
<p>Зарегистрируйтесь на форуме, чтобы отправлять сообщения, вести переписки и создавать темы.</p>
<a href="index.php?register" class="register-link">Зарегистрироваться</a>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var registerModal = document.getElementById('registerModal');
var openRegisterModal = document.getElementById('openRegisterModal');
var closeModal = document.getElementById('closeModal');
openRegisterModal.addEventListener('click', function() {
registerModal.style.display = 'flex';
});
closeModal.addEventListener('click', function() {
registerModal.style.display = 'none';
});
window.addEventListener('click', function(event) {
if (event.target === registerModal) {
registerModal.style.display = 'none';
}
});
});
</script>
</xf:if>Разместил я его под секцией в PAGE CONTAINER:
Код:
<div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}">Знаю, что я не супер шарящий в этом, поэтому и обращаюсь сюда.
Последнее редактирование:
