모달창에 링크를 현재창에서 열리게 하기
본문
모달창이 열리고 해당 모달에 링크가 있습니다. 이 링크를 클릭하면 새창에서 열리게 되는데, 모달창이 열린 현재창에서 모달은 닫히면서 링크를 열리게 할 수 없을까요?
모달창에서 a태그에서 target을 줘도 별 반응이 없더라구요.
답변 3
<script type="text/javascript">
location.href = "이동할 페이지 주소";
</script>
답변 감사합니다.
이것 저것 하다가 a태그 대신에 button을 사용해서 해결했습니다.
예를 들어 다음과 같이 해 볼 수 있을것 같습니다.
참고하셔서 원하시는 형식으로 수정하시면 가능하지 않을까 합니다.
<!DOCTYPE html>
<html>
<head>
<title>모달창 링크 새 창으로 열기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- 모달 버튼 -->
<button id="modalBtn">모달 열기</button>
<!-- 모달 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p><a href="https://example.com" class="modal-link">링크</a></p>
</div>
</div>
<script>
$(document).ready(function(){
// 모달 열기 버튼 클릭 시 이벤트 처리
$("#modalBtn").click(function(){
$("#myModal").css("display", "block");
});
// 모달 닫기 버튼 클릭 시 이벤트 처리
$(".close").click(function(){
$("#myModal").css("display", "none");
});
// 모달 내 링크 클릭 시 이벤트 처리
$(".modal-link").click(function(e){
// 모달 닫기
$("#myModal").css("display", "none");
// 새 창에서 링크 열기
window.open($(this).attr("href"));
// 링크 클릭 이벤트 취소
e.preventDefault();
});
});
</script>
</body>
</html>
이렇게 하면 모달이 닫힐 때 해당 링크를 새 창으로 열도록 할 수 있을 것 같습니다.
답변 감사합니다.
링크를 현재창에서 사용하려고 했었는데, 알려주신 방법에서 새창에서 열리더라구요.
이것 저것 테스트 해보다가 a태그 대신에 button을 사용해서 현재창 처리를 했습니다.
<style>
button {
display: block;
margin: auto;
width: 10rem;
height: 2rem;
}
:modal {
background-color: beige;
border: 2px solid burlywood;
border-radius: 5px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const showModal = document.getElementById('showModal');
const favDialog = document.getElementById('favDialog');
showModal.addEventListener('click', () => {
favDialog.showModal();
});
});
</script>
<p>Open the modal dialog</p>
<button id="showModal">Show me</button>
<dialog id="favDialog">
<form method="dialog">
<p><a href="https://google.com">This is a link</a></p>
<button>Close dialog</button>
</form>
</dialog>
답변 감사합니다.
알려주신 방법도 새창에서 열리더라구요.
a태그 대신에 button, onclick 을 이용해서 열린 모달창을 닫으면서 현재창에서 열리게 처리했습니다.
답변을 작성하시기 전에 로그인 해주세요.