iframe 콘텐츠에서 팝업 닫기가 작동하지 않음

debugcn 에 게시 Dev

잰시 아브라함

다음 코드로 iframe poup을 만들었습니다. 팝업은 iframe 콘텐츠와 함께로드됩니다. 그러나 닫기 버튼이 없습니다.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
$(function() {
    //----- OPEN
    $('[data-iframe-open]').on('click', function(e)  {
        var targeted_popup_class = jQuery('[data-iframe-open]').attr('data-iframe-open');
        $('[data-iframe="' + targeted_popup_class + '"]').fadeIn(500);

        e.preventDefault();
    });

    //----- CLOSE
    $('[iframe-close]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('iframe-close');
        $('[data-iframe="' + targeted_popup_class + '"]').fadeOut(500);

        e.preventDefault();
    });
});

    </script>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>
    <a class="btn" data-iframe-open="popup-1" href="javascript:void(0)">click here</a>
    <div class="popup" data-iframe="popup-1">
        <div class="popup-inner">
            <iframe src="https://jquery.com/" width="100%"  height="100%" />
            <a class="iframe-close" data-iframe-close="popup-1" href="#">x</a>        
        </div>
    </div>
</body>

</html>

여기 내 CSS가 있습니다.

/* Close Button */
.popup-close {
    width:30px;
    height:26px;
    padding-top:4px;
    display:inline-block;
    position:absolute;
    top:0px;
    right:0px;
    transition:ease 0.25s all;
    -webkit-transform:translate(50%, -50%);
    transform:translate(50%, -50%);
    border-radius:1000px;
    font-family:Arial, Sans-Serif;
    font-size:20px;
    text-align:center;
    line-height:100%;
    color:#fff;
    text-decoration: none;
    background: #DD3535;
}

.popup-close:hover {
    -webkit-transform:translate(50%, -50%) rotate(180deg);
    transform:translate(50%, -50%) rotate(180deg);
    text-decoration:none;
}

html 콘텐츠로 시도하면 모든 것이 잘 작동합니다. http://i.prntscr.com/G3YeTkSqRr2tRFsNIWJqEw.png

iframe 팝업을 어떻게 닫을 수 있습니까?

마부 불 이슬람

iframe태그를 닫습니다 .

<iframe src="https://jquery.com/" width="100%"  height="100%" ></iframe>

다음 close과 같이 기능을 변경하십시오 .

//----- CLOSE
$('.iframe-close').on('click', function(e) {
    var targeted_popup_class = jQuery(this).data('iframe-close');
    $('[data-iframe="' + targeted_popup_class + '"]').fadeOut(500);

    e.preventDefault();
});

이 코드를 이전 코드와 비교하면 차이점을 찾을 수 있습니다.

닫기 버튼 스타일의 변화를 가져올하기 popup-close에 iframe-close당신에 CSS.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-20

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

iframe 콘텐츠에서 팝업 닫기가 작동하지 않음

iframe 콘텐츠에서 팝업 닫기가 작동하지 않음

팝업 창에서 닫기 버튼이 작동하지 않음

TabBarView 콘텐츠가 setstate에서 업데이트되지 않음

수업에서 콘텐츠가로드되지 않음

웹 콘텐츠가 iframe에서로드되지 않습니다.

팝업에서 작동하지 않는 닫기 버튼

Leaflet 팝업에 이미지 표시가 작동하지 않음

콘텐츠 자동 업데이트에서 setInterval이 작동하지 않음

jce 팝업이 ajax 콘텐츠에서 작동하지 않습니다. 줌라에서

페이지에 iframe이있는 동안 부트 스트랩 모달 팝업이 작동하지 않음

ViewPager에서 탭 변경시 콘텐츠가 업데이트되지 않음-Tablayout

iframe 콘텐츠가 자동 제출되지 않음

Ajax 콘텐츠에서 JQuery 변경 기능이 작동하지 않음

Ajax 모델 팝업에서 JavaScript 코드가 작동하지 않음

경우에 따라 CSS 콘텐츠가 작동하지 않음

콘텐츠 스크립트에서 콘텐츠 JavaScript가 실행되지 않음

YouTube iframe 이후의 콘텐츠가 표시되지 않음

<div> 콘텐츠가 <iframe>에로드되지 않습니다.

jQuery Mobile 팝업 동적 콘텐츠가 새로 고쳐지지 않습니다.

PHP에서 팝업 양식을 사용하여 이미지 업로드가 작동하지 않음

팝업이 닫힐 때 부모 iframe이 다시로드되지 않음

iframe의 팝업 오버레이가 페이지 상단에 표시되지 않음

동적 작동하지 않는 내용 요소에 동적 콘텐츠 쓰기 JQuery와 이벤트 핸들은 iframe을 추가

콘텐츠 페이지에서 Jquery가 작동하지 않습니다.

iframe에서 클릭 할 때 숨기기 / 전환 div 닫기가 작동하지 않습니다.

jQuery 열기 팝업 창 코드가 Safari에서 작동하지 않습니다.

IE8에서 jquery 파일 업로드에 대해 jquery-iframe-transport가 작동하지 않음

Javascript를 사용하여 div에 콘텐츠 추가가 작동하지 않음

iFrame에서 콘텐츠 가져 오기

팝업이 UA 및 GTM에서 작동하지 않음