Форум

laimas · #11 (**permalink**) 07.12.2019, 14:36

Сообщение от maxg5

Как это реализовать?

Почитать API FancyBox, а я не заучиваю все что мне попадается наизусть. )

laimas · #12 (**permalink**) 07.12.2019, 14:47

maxg5, я могу и ошибаться, так что лучше глянуть API, но содержимое его можно подгружать ajax запросом, типа

$('селектор').fancybox({
        type: 'ajax',
        ajax : {
            type    : "POST",
            data    : данные
        }           
});

Загрузив таким образом форму, после отправления которой, закрыть окно, к которому доступ проще будет.

maxg5 · #13 (**permalink**) 07.12.2019, 14:47

С API FancyBox я не разберусь.
Можете дать пример кода пожалуйста на модальное c формой бех без использования FancyBox.
Мне нужно в обще две формы сделать.
1. Форма в модальном окне. Что бы окно зарвалось после успешной отправки.
2. И форма после отправки которой модальное окно появляется через 3с и исчезает.

Ищу примеры, не могу найти.

laimas · #14 (**permalink**) 07.12.2019, 14:50

Сообщение от maxg5

Можете дать пример кода

Чуть позже, запущу сервер, проверю, ибо надо вспомнить что там у него.

laimas · #15 (**permalink**) 07.12.2019, 14:52

Сообщение от maxg5

И форма после отправки которой модальное окно появляется через 3с и исчезает.

А это как понять?

maxg5 · #16 (**permalink**) 07.12.2019, 15:00

Опечатка была:
форма после отправки которой модальное окно появляется НА 3 секунды и исчезает

laimas · #17 (**permalink**) 07.12.2019, 15:06

Сообщение от maxg5

форма после отправки которой модальное окно появляется НА 3 секунды и исчезает

1) Формы уже на страницах, но помещаются в окно?
2) Если после отправления формы, должно появится окно на N сек, то форма также из окна отправляется, а окно после отправки, это сообщение результата отправления?

maxg5 · #18 (**permalink**) 07.12.2019, 15:20

Сообщение от laimas

1) Формы уже на страницах, но помещаются в окно?
2) Если после отправления формы, должно появится окно на N сек, то форма также из окна отправляется, а окно после отправки, это сообщение результата отправления?

1. Первая форма появляется в модальном окне по нажатию на кнопку. Вторая форма расположена на самой старание(Не в модальном окне). Выходит Вторая форма на странице. А Перовой форме задано display:none;. (Т.к. она появляется в модальном окне).
2. окно на N секунд должно появляться только для второй формы. Окно после отправки, это сообщение результата отправления формы.

laimas · #19 (**permalink**) 07.12.2019, 17:40

<?
if($_POST) {
    if(isset($_POST['sleep'])) sleep(3);
    exit(print_r($_POST, 1));
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(function() {
    $(".modalbox").fancybox({						
        padding: 20,
        frameWidth: 400,
        frameHeight: 300,
        overlayOpacity: 0.7					
    });
    
    $('#feedback').submit(function(e) {
        var f = $(this);
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: location,
            data: f.serialize(),
            success: function(d) {
                $('pre').text(d);
                $.fancybox.close(); //закрывается только после ответа
            }
        })    
    });
    
    $('#feed_message').submit(function(e) {
        var f = $(this);
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: location,
            data: f.serialize(),
            success: function(d) {
                //показать сообщение
                $.fancybox.open({
                    content: '<p>Done!</p>',
                    afterShow: function() {
                            $(this.skin[0]).find('a.fancybox-close').hide(); 
                            var tm = setTimeout(function() {
                                 //скрыть сообщение
                                 $.fancybox.close();
                                 clearTimeout(tm)        
                            }, 3000)
                    }
	            })
            }
        })    
    });
});
</script>
</head>
<body>
<div>
	<p><a href="#feedback" class="modalbox">Sender</a></p>
    <div style="display: none;">
        <h2>Send form</h2>
        <form id="feedback">
            <input name="name" value="as"><br>
            <input name="email" value="as@as.as"><br>
            <input type="hidden" name="sleep" value="1" />
            <button>Send</button>
        </form>
    </div>
</div>

<pre>
</pre>

<div>
	<p>Message</p>
    <form id="feed_message">
        <input name="name" value="as"><br>
        <input name="email" value="as@as.as"><br>
        <button>Send</button>
    </form>
</div>
</body>
</html>

Спрятать кнопку close можно опционально (только опция closeBtn у другой версии может отличаться, то есть ее имя), и если сообщение формирует сервер, значит его определять в опциях:

success: function(data) {
    $.fancybox.open({
        content: data,
        afterShow: function() {
            var tm = setTimeout(function() {
                    $.fancybox.close();
                    clearTimeout(tm)        
                }, 3000)
        },
        closeBtn: false //или modal: true, должна скрываться по определению во всех версиях
    })
}

maxg5 · #20 (**permalink**) 07.12.2019, 19:01

Сообщение от laimas

<?
if($_POST) {
    if(isset($_POST['sleep'])) sleep(3);
    exit(print_r($_POST, 1));
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(function() {
    $(".modalbox").fancybox({						
        padding: 20,
        frameWidth: 400,
        frameHeight: 300,
        overlayOpacity: 0.7					
    });
    
    $('#feedback').submit(function(e) {
        var f = $(this);
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: location,
            data: f.serialize(),
            success: function(d) {
                $('pre').text(d);
                $.fancybox.close(); //закрывается только после ответа
            }
        })    
    });
    
    $('#feed_message').submit(function(e) {
        var f = $(this);
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: location,
            data: f.serialize(),
            success: function(d) {
                //показать сообщение
                $.fancybox.open({
                    content: '<p>Done!</p>',
                    afterShow: function() {
                            $(this.skin[0]).find('a.fancybox-close').hide(); 
                            var tm = setTimeout(function() {
                                 //скрыть сообщение
                                 $.fancybox.close();
                                 clearTimeout(tm)        
                            }, 3000)
                    }
	            })
            }
        })    
    });
});
</script>
</head>
<body>
<div>
	<p><a href="#feedback" class="modalbox">Sender</a></p>
    <div style="display: none;">
        <h2>Send form</h2>
        <form id="feedback">
            <input name="name" value="as"><br>
            <input name="email" value="as@as.as"><br>
            <input type="hidden" name="sleep" value="1" />
            <button>Send</button>
        </form>
    </div>
</div>

<pre>
</pre>

<div>
	<p>Message</p>
    <form id="feed_message">
        <input name="name" value="as"><br>
        <input name="email" value="as@as.as"><br>
        <button>Send</button>
    </form>
</div>
</body>
</html>

Спрятать кнопку close можно опционально (только опция closeBtn у другой версии может отличаться, то есть ее имя), и если сообщение формирует сервер, значит его определять в опциях:

success: function(data) {
    $.fancybox.open({
        content: data,
        afterShow: function() {
            var tm = setTimeout(function() {
                    $.fancybox.close();
                    clearTimeout(tm)        
                }, 3000)
        },
        closeBtn: false //или modal: true, должна скрываться по определению во всех версиях
    })
}

Спасибо!
Применил Ваш код к своему сайту. Но у меня почему то в модальном окне, при нажатии на кнопку Отправить окно закрывается и все. Должно выдаться сообщение в этом же модальном окне(Где нибудь под кнопкой отправить) Ваша заявка отправлена. И через 3 секунды окно закрыться должно.
php добавил тот что я выше показывал.
В чем может быть проблема? Вот сайт. Модальное окно прикручено к кнопке Онлайн заявка только в шапке под номером которая.

Форум

Справочник

Discord чат

Курсы javascript