4

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 being passed into the iframe to be able to close the container.

Dusan
  • 43
  • 1
  • 4

4 Answers4

8

Try the following:

parent.$.modal.close();

source

Community
  • 1
  • 1
Eric Martin
  • 2,841
  • 2
  • 23
  • 23
  • I actually have that in my code right now and that I didn't work. Here's a quick overlook on what I have.
    – Dusan Dec 28 '10 at 14:30
  • This works perfectly every time. In your iframe: – trevorc Nov 08 '11 at 18:25
3

try this:

$(document).keyup(function (e) {
        if (e.keyCode == 27) {
            return;
        }   
    });
Bill the Lizard
  • 398,270
  • 210
  • 566
  • 880
rams
  • 46
  • 1
1

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

user524986
  • 11
  • 3
1

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!

Federico
  • 68
  • 6