목록으로

모달창에 링크를 현재창에서 열리게 하기 채택완료

동글이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

1년 전 조회 2,302

답변 3

모달창이 열리고 해당 모달에 링크가 있습니다. 이 링크를 클릭하면 새창에서 열리게 되는데, 모달창이 열린 현재창에서 모달은 닫히면서 링크를 열리게 할 수 없을까요?

모달창에서 a태그에서 target을 줘도 별 반응이 없더라구요.

#그누보드5 #모달 #현재창 #링크

답변 3개

정렬:

배르만

프로필 보기 이 회원 글보기 이 회원의 댓글보기

1년 전

Copy

<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>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

동글이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

1년 전

답변 감사합니다.
알려주신 방법도 새창에서 열리더라구요.
a태그 대신에 button, onclick 을 이용해서 열린 모달창을 닫으면서 현재창에서 열리게 처리했습니다.

댓글을 작성하려면 로그인이 필요합니다.

웹메이킹

프로필 보기 이 회원 글보기 이 회원의 댓글보기

1년 전

예를 들어 다음과 같이 해 볼 수 있을것 같습니다.

참고하셔서 원하시는 형식으로 수정하시면 가능하지 않을까 합니다.

Copy

<!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">&times;</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>

이렇게 하면 모달이 닫힐 때 해당 링크를 새 창으로 열도록 할 수 있을 것 같습니다.

로그인 후 평가할 수 있습니다