当前位置：文江博客话题详情

SimpleModal - 使用关闭按钮关闭 iframe

发布于 2024-10-04 22:30:52 字数 136 浏览 6 评论 0原文

所以我四处寻找，但找不到明确的答案。我希望我的 iframe 有一个关闭按钮，以便用户可以单击它，而不是使用 ESC 键来关闭 SimpleModal 容器。

我已经尝试了几件事，但似乎没有任何内容被传递到 iframe 中以便能够关闭容器。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小ぇ时光︴ 2024-10-11 22:30:52

请尝试以下操作：

parent.$.modal.close();

源

Try the following:

parent.$.modal.close();

source

回复收藏 0 原文

夏末染殇 2024-10-11 22:30:52

试试这个：

$(document).keyup(function (e) {
        if (e.keyCode == 27) {
            return;
        }   
    });

try this:

$(document).keyup(function (e) {
        if (e.keyCode == 27) {
            return;
        }   
    });

回复收藏 0 原文

傲世九天 2024-10-11 22:30:52

我也遇到过同样的问题。当我的 iFrame 的“src”属性使用 https 作为协议时，就会发生这种情况。在这种情况下，parent.$.modal.close(); 将不起作用。

我解决这个问题的方法是添加 Eric 在 SimpleModal 项目页面上谈到的常用关闭按钮。

将 closeHTML 行添加到模态脚本中：

closeHTML:"<a href='#' class='modalCloseImg' alt='Close' title='Close'><a>",

这会将关闭按钮添加到模态的外部，而不是 iFrame 内部。

然后，您需要在页面上使用此 CSS 来设置关闭按钮的样式：

<style type="text/css"> 
#simplemodal-container a.modalCloseImg {
    background:url('http://your.domain.name/your_image_folder/x.png') no-repeat; /* adjust url as required */
    width:25px;
    height:29px;
    display:inline;
    z-index:3200;
    position:absolute;
    top:-15px;
    right:-18px;
    cursor:pointer;
}
</style>

您可以在此处找到图像：
SimpleModal 演示的 x.png

这是为您提供的完整脚本：

<script type="text/javascript">
// Display an external page using an iframe
var src = "http://your.domain.name/your_source_file.html";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
    closeHTML:"<a href='#' class='modalCloseImg' alt='Close' title='Close'><a>", /* Add this <a> tag for the Close image to appear. */
    containerCss:{
        backgroundColor:"#fff",
        borderColor:"#fff",
        height:450,
        padding:0,
        width:830
    },
    overlayClose:false /* Stops user from clicking overlay to exit modal. */
});
</script>

我希望这有帮助！
干杯
保罗

I've had the same problem. It occured when my iFrame's "src" attribute used https as protocol. In that case parent.$.modal.close(); wouldn't work.

What I did to fix it was add the usual close button that Eric talks about on the SimpleModal project page.

Add the closeHTML line to your modal script:

closeHTML:"<a href='#' class='modalCloseImg' alt='Close' title='Close'><a>",

This will add the close button on the outside of the modal, not inside the iFrame.

You'll then need to style the close button, using this CSS on your page:

<style type="text/css"> 
#simplemodal-container a.modalCloseImg {
    background:url('http://your.domain.name/your_image_folder/x.png') no-repeat; /* adjust url as required */
    width:25px;
    height:29px;
    display:inline;
    z-index:3200;
    position:absolute;
    top:-15px;
    right:-18px;
    cursor:pointer;
}
</style>

You can find the image here:
SimpleModal Demo's x.png

Here's a full script for you:

<script type="text/javascript">
// Display an external page using an iframe
var src = "http://your.domain.name/your_source_file.html";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
    closeHTML:"<a href='#' class='modalCloseImg' alt='Close' title='Close'><a>", /* Add this <a> tag for the Close image to appear. */
    containerCss:{
        backgroundColor:"#fff",
        borderColor:"#fff",
        height:450,
        padding:0,
        width:830
    },
    overlayClose:false /* Stops user from clicking overlay to exit modal. */
});
</script>

I hope this helps!
Cheers
Paul

回复收藏 0 原文