Question

我使用以下代码创建了一个iframe poup。 Popup加载了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弹出窗口？

Answer 1

关闭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。

Answer 2

我认为iframe关闭没有设置绝对位置或 z-index低或 popup over-flow hiddin或auto和（right或top）否定

iframe不是自我关闭标记

所以请使用“＆lt; iframe src =”jquery.com/“; width =”100％“height =”100％“＆gt;＆lt; / iframe＆gt; ”而不是“< em>＆lt; iframe src =“jquery.com/”; width =“100％”height =“100％”/＆gt; “

popup关闭不使用iframe内容

2 个答案: