Hi all!
As always, no excessive teasing needed, here is the demo if the user is not logged in: https://test-play.softr.app/slide-page
All style stuff should be customizable. Also note that the not logged in user won’t have the ability to click anywhere except on the link provided (‘log in’).
In the header code of the page settings:
<div id="alertWrapper">
<div id="alertBox" class="custom-alert">
<a href="#" id="goBackBtn">Go Back</a>
<p>You are not logged in. Please <a href="https://yoursoftrapp.com/whatever-you-want">log in</a> to access the content.</p>
</div>
</div>
<style>
#alertWrapper {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
z-index: 999;
display: none;
}
.custom-alert {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ebebeb;
color: #000000;
border-radius: 8px;
border: 2px solid #182939;
padding-top: 50px;
padding-right: 60px;
padding-bottom: 50px;
padding-left: 60px;
z-index: 1000;
font-family: Inter, sans-serif;
font-weight: 600;
font-size: 16px;
}
.custom-alert p {
margin: 0;
}
.custom-alert * {
pointer-events: auto;
}
#goBackBtn {
position: absolute;
top: 15px;
left: 15px;
color: #000000;
text-decoration: underline;
font-size: 13px;
font-weight: 400;
}
@media only screen and (max-width: 768px) {
.custom-alert {
padding: 50px 20px;
}
}
</style>
In the footer code of the page settings:
<script>
if (!window.logged_in_user) {
var alertWrapper = document.getElementById("alertWrapper");
alertWrapper.style.display = "flex";
}
</script>
<script>
document.getElementById("goBackBtn").addEventListener("click", function(event) {
event.preventDefault();
window.history.back();
});
</script>