목록으로

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

동글이

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

1년 전 조회 2,056

답변 3

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

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

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

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

답변 3개

정렬:

배르만

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

1년 전

</p>

<p><style>

button {

  display: block;

  margin: auto;

  width: 10rem;

  height: 2rem;

}</p>

<p>:modal {

  background-color: beige;

  border: 2px solid burlywood;

  border-radius: 5px;

}

</style></p>

<p><script>

document.addEventListener('DOMContentLoaded', function () {

  const showModal = document.getElementById('showModal');

  const favDialog = document.getElementById('favDialog');</p>

<p>  showModal.addEventListener('click', () => {

    favDialog.showModal();

  });

});

</script></p>

<p><p>Open the modal dialog</p>

<button id="showModal">Show me</button></p>

<p><dialog id="favDialog">

  <form method="dialog">

    <p><a href="<a href="https://google.com">This" target="_blank" rel="noopener noreferrer">https://google.com">This</a> is a link</a></p>

    <button>Close dialog</button>

  </form>

</dialog></p>

<p>

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

답변에 대한 댓글 1개

�

동글이

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

1년 전

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

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

웹메이킹

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

1년 전

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

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

</p>

<p><!DOCTYPE html>

<html>

<head>

    <title>모달창 링크 새 창으로 열기</title>

    <script src="<a href="https://code.jquery.com/jquery-3.6.0.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.6.0.min.js"></script></a>

</head>

<body></p>

<p><!-- 모달 버튼 -->

<button id="modalBtn">모달 열기</button></p>

<p><!-- 모달 -->

<div id="myModal" class="modal">

    <div class="modal-content">

        <span class="close">×</span>

        <p><a href="<a href="https://example.com"" target="_blank" rel="noopener noreferrer">https://example.com"</a> class="modal-link">링크</a></p>

    </div>

</div></p>

<p><script>

    $(document).ready(function(){

        // 모달 열기 버튼 클릭 시 이벤트 처리

        $("#modalBtn").click(function(){

            $("#myModal").css("display", "block");

        });</p>

<p>        // 모달 닫기 버튼 클릭 시 이벤트 처리

        $(".close").click(function(){

            $("#myModal").css("display", "none");

        });</p>

<p>        // 모달 내 링크 클릭 시 이벤트 처리

        $(".modal-link").click(function(e){

            // 모달 닫기

            $("#myModal").css("display", "none");

            // 새 창에서 링크 열기

            window.open($(this).attr("href"));

            // 링크 클릭 이벤트 취소

            e.preventDefault();

        });

    });

</script></p>

<p></body>

</html></p>

<p>

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

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