비회원이 일정게시물 링크 클릭시 로그인유도창 채택완료
요즘에 사이트들 구경하러다니다보면 게시물 몇개 링크 누르면 로그인 유도를 위해
뒷배경이 살짝 흐린상태에 로그인창이 나와 로그인이나 회원가입을 유도하도록
창이 나오는데 x 누르거나 화면 아무대나 누르면 그창은 닫히고 사이트 이용하는대는 문제는없는데
랜덤으로 여러 게시글 클릭하면 나오더라구요
이걸 홈페이지에 적용하고싶은데 관련 방법을 알고계신분 전문가님 계신지요
홈페이지에 해놓으면 좋을꺼같은데 그누에는 아직 팁이나 이런게 보이지가않네요
혹시 해당 방법 아시는분 계시면 좋은정보좀 부탁드려요
답변 3개
※ 링크 유도로 특정 상황에서 님이 지정하신 페이지로 리디렉션 시키고 싶으신가요 ?
- 특정 링크 크릭 > '모달창' 띄움 (showModal 함수), 로그인 모달 팝업.
- closeModal 함수 > '모달창' 닫음.
- redirectToLogin 함수 > 로그인 페이지로 유도
- '모달 배경' 크릭 > redirectToRandomPost 함수가 님이 지정하신 page로 ~
</p>
<p><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로그인 유도</title>
<style>
.modal-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
z-index: 1001;
text-align: center;
}
</style>
</head>
<body>
<div id="modalBackground" class="modal-background">
<div class="modal">
<h2>로그인 요구</h2>
<p>로그인 하실 수 있습니다.</p>
<button onclick="redirectToLogin()">로그인, 회원가입 하기</button>
<button onclick="closeModal()">닫기</button>
</div>
</div>
<a href="#" onclick="showModal()">님이 지정한 게시물 링크</a></p>
<p> <script>
function showModal() {
document.getElementById('modalBackground').style.display = 'block';
}
function closeModal() {
document.getElementById('modalBackground').style.display = 'none';
}
function redirectToLogin() {
window.location.href = '<a href="https://님의_도메인_root.com/login';" target="_blank" rel="noopener noreferrer">https://님의_도메인_root.com/login';</a>
}
document.getElementById('modalBackground').addEventListener('click', function(event) {
if (event.target === document.getElementById('modalBackground')) {
redirectToRandomPost();
}
});
function redirectToRandomPost() {
const randomUrls = [
'<a href="https://랜덤페이지.com/post1'," target="_blank" rel="noopener noreferrer">https://랜덤페이지.com/post1',</a>
'<a href="https://랜덤페이지.com/post2'," target="_blank" rel="noopener noreferrer">https://랜덤페이지.com/post2',</a>
'<a href="https://랜덤페이지.com/post3'" target="_blank" rel="noopener noreferrer">https://랜덤페이지.com/post3'</a>
];
const randomUrl = randomUrls[Math.floor(Math.random() * randomUrls.length)];
window.location.href = randomUrl;
}
</script>
</body>
</html></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인