SimpleModal - закрытие iframe кнопкой закрытия - PullRequest
Новая
       11

SimpleModal - закрытие iframe кнопкой закрытия

4 голосов
/ 27 ноября 2010

Так что я искал вокруг, и я не мог найти окончательный ответ.Я хочу, чтобы в моем iframe была кнопка закрытия, чтобы пользователи могли нажимать ее вместо нажатия клавиши ESC для закрытия контейнера SimpleModal.

Я пробовал несколько вещей, но, похоже, ничего не происходит.передается в iframe, чтобы иметь возможность закрыть контейнер.

Ответы [ 4 ]

8 голосов
/ 07 декабря 2010

Попробуйте следующее: 

parent.$.modal.close();

источник

3 голосов
/ 21 января 2011

попробуйте это: 

$(document).keyup(function (e) {
        if (e.keyCode == 27) {
            return;
        }   
    });
1 голос
/ 17 августа 2012

Я решаю это простым способом, но я использовал ссылку <a> вместо кнопки, но это то же самое.

Проще говоря, это: class = "simplemodal-close" Например,если вы хотите закрыть кнопку: <input type="submit" class="simplemodal-close" value="Close" />

Попробуйте, нет функций, нет onclick = "", нет ничего.Это работает

Предполагается, что вы используете Simplemodal: http://www.ericmmartin.com/projects/simplemodal_v101/

Удачи!

1 голос
/ 10 апреля 2012

У меня была такая же проблема. Это происходило, когда атрибут «src» моего iFrame использовал https в качестве протокола. В этом случае parent.$.modal.close(); не будет работать.

Чтобы исправить это, я добавил обычную кнопку закрытия, о которой говорит Эрик на странице проекта 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>

Надеюсь, это поможет! ура Пол

...