특정 페이지 모든 링크(a태그) 클릭시 경고창 출력 채택완료
퍼펙또
11년 전
조회 7,934
모바일 상품주문페이지에서 실수로 다른 링크를 눌러 빠져나가는 경우가 가끔 발생하는것 같더라구요.
특히 터치가 서투른 분들 ㅋㅋ;; 다시 돌아가도 입력하던 내용은 모두 날아가지요ㅜㅜ
그래서 상품주문페이지에 스크립트나 기타 방법으로 해당 페이지에서 타 링크(모든 a태그) 클릭시
"입력하시던 정보가 모두 소실됩니다. 이 페이지를 나가시겠습니까?" 라는 alert 창을 띄워주고 싶은데,
혹시 간단히 구현할수 있는 방법이 있을까요? (__)
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
11년 전
jquery 를 사용한다는 가정하에..
</p><p><script></p><p>$(window).on('beforeunload', function () {</p><p> return '<span style="font-family: gulim, helvetica; line-height: 23.5440006256104px; background-color: rgb(255, 255, 255);">입력하시던 정보가 모두 소실됩니다. </span><span style="line-height: 1.5; font-family: 굴림, Gulim, 돋움, Dotum, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">이 페이지를 나가시겠습니까?</span><span style="font-family: 굴림, Gulim, 돋움, Dotum, Helvetica, sans-serif; line-height: 1.5;">'</span><span style="font-family: 굴림, Gulim, 돋움, Dotum, Helvetica, sans-serif; line-height: 1.5;">;</span></p><p>}); </p><p></script></p><p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
퍼펙또
11년 전
답변 정말 감사드립니다 ㅜㅜ 혹시 제이쿼리 사용을 안한다는 가정하에 대체해서 쓸수 있는 방법은 없을까요? 모바일 브라우저에 따라 머물기 눌러도 알럿이 두번뜨는 오류가 가끔 생기네용..ㅜㅜ
댓글을 작성하려면 로그인이 필요합니다.
11년 전
jquery 안써도 비슷합니다<br />
<div class="code-block-wrapper">
<button onclick="copyCodePrism(this)" class="copy-code-btn" style="position: absolute; top: 10px; right: 10px; z-index: 10; background: rgba(0,0,0,0.5); color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(10px);" onmouseover="this.style.background='rgba(0,0,0,0.7)'; this.style.transform='translateY(-1px)'" onmouseout="this.style.background='rgba(0,0,0,0.5)'; this.style.transform='translateY(0)'">
<svg style="width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin-right: 4px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
<span class="copy-text">Copy</span>
</button>
<pre class="language-markup"><code class="language-markup"><script>
window.onbeforeunload = function () {
return '입력하시던 정보가 모두 소실됩니다. 이 페이지를 나가시겠습니까?';
};
</script></code></pre>
</div>
<div class="code-block-wrapper">
<button onclick="copyCodePrism(this)" class="copy-code-btn" style="position: absolute; top: 10px; right: 10px; z-index: 10; background: rgba(0,0,0,0.5); color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(10px);" onmouseover="this.style.background='rgba(0,0,0,0.7)'; this.style.transform='translateY(-1px)'" onmouseout="this.style.background='rgba(0,0,0,0.5)'; this.style.transform='translateY(0)'">
<svg style="width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin-right: 4px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
<span class="copy-text">Copy</span>
</button>
<pre class="language-markup"><code class="language-markup"><script>
window.onbeforeunload = function () {
return '입력하시던 정보가 모두 소실됩니다. 이 페이지를 나가시겠습니까?';
};
</script></code></pre>
</div>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인