Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.53/15: Рейтинг темы: голосов - 15, средняя оценка - 4.53
marketarea
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
1

Сделать кнопку для закрытия модального окна

03.09.2016, 10:25. Просмотров 3027. Ответов 3
Метки нет (Все метки)

Как закоыть модальное HTML окно после отправки формы?
Окно открыто с помощю :target.
Желательно без JS/Jquery, но если по другому не как то тогда чтобы скрипт определял ID модального окна и закрывал его(не прятал! а закрывал!)
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.09.2016, 10:25
Ответы с готовыми решениями:

Можно ли задать размер картинки для закрытия модального окна?
Для закрытия модального окна используется вот такой типовой код: a.modalCloseImg { ...

Глюк скролла после закрытия модального окна
Всем привет. сразу скажу - я нуб. Есть сайт http://katet-arch.ru/, потихоньку пилится. В...

Как сделать Link url на класс модального окна?
<a href="#" class="eModal-1">Open Modal</a> Кнопка вшита в шаблон,в нее можно только линк...

Кнопка для вывода модального окна
Как сделать кнопку для вывода модального окна, сколько гуглил не очень понимаю как и что должно...

Автозакрытие модального окна
вот здесь, нашел как сделать модальное окно, но немогу понять, возможно ли сраз после отправки...

3
monochromer
411 / 373 / 163
Регистрация: 03.01.2013
Сообщений: 966
03.09.2016, 12:01 2
Добавьте ссылку внутрь модального окна, например:
HTML5
1
<a href="#close">close</a>
0
boilzzz
Богатый духовно
454 / 261 / 145
Регистрация: 10.03.2015
Сообщений: 1,045
Завершенные тесты: 2
03.09.2016, 12:03 3
marketarea, Код выложите, а то гадать не охото.
0
marketarea
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
03.09.2016, 12:27  [ТС] 4
HTML5
1
2
3
4
5
6
7
8
9
10
<div id="cbf" class="callback-modal">
            <form action="action_page.php" method="post">
                <a href="#" class="closebtn">Г—</a>
                <fieldset>
                    <legend align="center">Обратный звонок</legend>
                    <input type="tel" name="usrtel" placeholder="Ваш телефон" required>
                </fieldset>
                <input type="submit" value="Отправить">
            </form>
        </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.callback-modal {
    display: none;
}
 
 .callback-modal {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 9999;
    }
 
.callback-modal form {
        position: relative;
        margin: 0 auto;
    }
 
    .callback-modal:target {
        display: block;
    }
 
    .closebtn {
        text-decoration: none;
        position: absolute;
        top: 0;
        right: 20px;
        font-size: 32px;
        font-weight: bold;
        color: #838383;
    }
 
    .closebtn:hover,
    .closebtn:focus {
        color: #7a0000;
        text-decoration: none;
        cursor: pointer;
    }
Окно должно закрыватся "переход по #" после сабмита данных

Добавлено через 58 секунд
сейчас что то такое:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function () {
    $('form').submit(function (e) {
        var $form = $(this);
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize()
        }).done(function () {
            alert('Сообщение успешно отправлено!');
            //$('#cbf').hide();
            //$('#cbf').css("display", "none");
            location.assign("#");
            console.log('success');
        }).fail(function () {
            console.log('fail');
        });
        e.preventDefault();
    });
});
Интересует реализация средствами CSC/HTML

Добавлено через 9 минут
Задача отказатся по возможности от использования JS в любом виде на странице.
а мешает этому это закрытие окна/переход по "#"
и вот эта тема Закрыть модальное HTML окно
0
03.09.2016, 12:27
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.09.2016, 12:27

Открытие модального окна
Есть ссылка в виде картинки: &lt;a href=&quot;#&quot;&gt; &lt;img src=&quot;image/Kyiv2.jpg&quot; alt=&quot;Kyiv&quot;&gt; &lt;/a&gt; ...

Правка модального окна
Помогите разобраться! на моб. устройствах модальные окна выглядят как на рисунке! т.е. на пол...

Создание модального окна
Здравствуйте, необходимо создание модального окна, возможно на Bootstrap , но главное, чтоб оно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru