SimpleModal - closing iframe with close button

So I've searched around and I couldn't find a definitive answer. I want my iframe to have a close button so that users can click it instead of going with the ESC key to close the SimpleModal container.

I've tried several things, but it doesn't seem like anything is b开发者_JS百科eing passed into the iframe to be able to close the container.

Try the following:

parent.$.modal.close();

source

try this:

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

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

I solve this in a simple way, but I used a link <a> instead of a button, but is the same.

Just simple put this: class="simplemodal-close" For example, if you want a button to close: <input type="submit" class="simplemodal-close" value="Close" />

Try it, no functions, no onclick="", no nothing. It Works

Assuming you are using the Simplemodal of: http://www.ericmmartin.com/projects/simplemodal_v101/

Good Luck!