스크립트좀 봐주세요 ^^
본문
<script>
$().ready(function () {
setTimeout(function()
{
Swal.fire({
timer : 2000,
imageUrl: '/img/kakao.jpg',
imageHeight: 473,
imagemarginleft: -47,
});
},2000);
});
</script>
현재 스크립트 작동은 잘 되고 있습니다.
imageUrl: '/img/kakao.jpg' 팝업후에 이미지 클릭시 링크 되도록 하고싶은데, 잘 안되네요 ^^;
답변 3
window.location.href = 'naver.com; 이 부분을 window.location.href = 'https://naver.com; 이렇게 수정을 해보시고 그래도 안되신다면 아래의 코드를 참고 해보세요
$().ready(function() {
setTimeout(function() {
Swal.fire({
timer: 2000,
imageUrl: '/img/kakao.jpg',
imageHeight: 473,
imagemarginleft: -47,
showConfirmButton: false, // 확인 버튼 숨김
allowOutsideClick: true, // 외부 클릭 허용
}).then(function(result) {
if (result.isDismissed) {
// 이미지 클릭 시 이동할 링크를 설정합니다.
window.location.href = 'https://www.naver.com';
}
});
}, 2000);
});
window.location.href = 'naver.com; 이 부분을 window.location.href = 'https://naver.com; 이부분은 아까도 시도 해 보았던거구요.
아래걸로 해보니 2초후자동으로 이동되어지네요 ^^ ;
바로 이동이 되게 하려면 allowOutsideClick 옵션을 true로 설정하여 외부 클릭을 활성화한 뒤, imageUrl에 클릭 이벤트를 추가하여 이미지를 클릭했을 때 바로 이동하도록 수정
이렇게 하면 되지 않을까 하는 생각입니다.
$().ready(function() {
setTimeout(function() {
Swal.fire({
timer: 2000,
imageUrl: '/img/kakao.jpg',
imageHeight: 473,
imagemarginleft: -47,
showConfirmButton: false, // 확인 버튼 숨김
allowOutsideClick: true, // 외부 클릭 활성화
}).then(function(result) {
if (result.isDismissed && result.dismiss === Swal.DismissReason.outside) {
// 이미지 클릭 시 이동할 링크를 설정합니다.
window.location.href = 'https://www.naver.com';
}
});
// 이미지 클릭 시 바로 이동하도록 설정합니다.
$('.swal2-image').click(function() {
window.location.href = 'https://www.naver.com';
});
}, 2000);
});
바쁜시간 감사 드립니다 ^^
<script>
$().ready(function() {
setTimeout(function() {
Swal.fire({
timer: 2000,
imageUrl: '/img/kakao.jpg',
allowOutsideClick: true, // 외부 클릭 활성화
}).then(function(result) {
if (result.isDismissed && result.dismiss === Swal.DismissReason.outside) {
// 이미지 클릭 시 이동할 링크를 설정합니다.
window.location.href = 'https://www.naver.com';
}
});
// 이미지 클릭 시 바로 이동하도록 설정합니다.
$('.swal2-image').click(function() {
window.location.href = 'https://www.naver.com';
});
}, 2000);
});
</script>
이렇게 해서 마무리 했습니다 ^^
마우스 올리면 마우스 포인트 까지 되면 좋겠습니다.
감사 드립니다.
이미지 클릭시 링크를 연결하기 위해서 onImageClick 옵션을 사용해서 구현 할 수 있습니다
$().ready(function() {
setTimeout(function() {
Swal.fire({
timer: 2000,
imageUrl: '/img/kakao.jpg',
imageHeight: 473,
imagemarginleft: -47,
onImageClick: function() {
// 이미지 클릭 시 이동할 링크를 설정합니다.
window.location.href = '링크 주소';
}
});
}, 2000);
});
위 코드를 참고하셔서 수정 하시면 원하시는 결과를 얻으실 수 있을것 같습니다.
링크주소 부분에는 이미지 클릭 시 이동하고자 하는 링크의 URL을 입력하시면 됩니다
답변 감사 드립니다.
onImageClick: function() {
// 이미지 클릭 시 이동할 링크를 설정합니다.
window.location.href = 'naver.com;
}
추가 했는데 반응을 안하네요 ^^;
CSS의 cursor 속성을 사용하면 마우스를 올렸을때 커서를 표시하게 할 수 있습니다.
<script>태그 바로아래에 추가하시면 될 것 같습니다.
$('.swal2-image').hover(function() {
$(this).css('cursor', 'pointer');
});
설명글까지 써 주시고, 감사 드립니다.
마우스는 좀더 공부 해 보겠습니다 ^^
css cursor:pointer 줘서 해결 했습니다. 감사 드립니다 ^^
.swal2-image{cursor:pointer; }