Question

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

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

Answer 1

尝试以下方法：

parent.$.modal.close();

source

Answer 2

试试这个：

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

Answer 3

我遇到了同样的问题。当我的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 Demo's 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>

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

Answer 4

我以一种简单的方式解决了这个问题，但我使用了链接<a>而不是按钮，但它是相同的。

简单地说吧：class =“simplemodal-close” 例如，如果您想要关闭按钮：<input type="submit" class="simplemodal-close" value="Close" />

尝试一下，没有功能，没有onclick =“”，没有任何东西。它可以工作

假设您使用的是Simplemodal：http://www.ericmmartin.com/projects/simplemodal_v101/

祝你好运！

SimpleModal - 使用关闭按钮关闭iframe

4 个答案: