php – How to customize popup window with fancybox after clicking button with

Question:

There is a form:

<form class="order-form" method="post" action="" id="contact">

  <div class="FormGroup">
    <input type="text" name="fl_name" placeholder="Представьтесь">
  </div>
  <div class="FormGroup">
    <input type="text" name="city" placeholder="Из какого Вы города">
  </div>
  <div class="FormGroup">
    <input type="text" name="telephone" placeholder="тел. 050-000-00-00">
  </div>
  <div class="FormGroup">
    <button type="submit" name="submit">Заказать сейчас</button>
  </div>

</form>

Plz tell me how to open a window with a <div id="thx"> block for 5-10 seconds after submitting the form and it disappears, I plan to do it on fancybox

I plan to use:

$('#send').submit(function(e) {
$.fancybox({
    href: '#thx', 
    modal: true
});
return false;
});

But the opening never happens…

Answer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #thx {
      position: fixed;
      width: 200px;
      left: 50%;
      padding: 50px 100px;
      border: 3px solid #eee;
      text-align: center;
    }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.order-form').submit(function(event) {

        $("#thx").css('margin-left', -$("#thx").outerWidth() / 2); // Выравниваем по центру окно относительно его ширины

        $("#thx").fadeIn(500); // Показываем окно

        setTimeout(function() {
          $("#thx").fadeOut(500); // Скрываем его
        }, 5000); // 5000 = 5 секунд

        event.preventDefault(); // Отменяет отправку формы. Это вместо retrun false; Хотя может я не правильно понял зачем вы использовали return false;
      });
    });
  </script>
</head>
<body>
  <form class="order-form" method="post">
    <div class="FormGroup">
      <input type="text" name="fl_name" placeholder="Представьтесь">
    </div>
    <div class="FormGroup">
      <input type="text" name="city" placeholder="Из какого Вы города">
    </div>
    <div class="FormGroup">
      <input type="text" name="telephone" placeholder="тел. 050-000-00-00">
    </div>
    <div class="FormGroup">
      <button type="submit" name="submit">Заказать сейчас</button>
    </div>
    <div id="thx" style="display:none">
      Контент
    </div>
  </form>
</body>
</html>

UPDATE

$('.send').click(function() {
    var timeout = 5000;

    $.fancybox({
        href: '#thx',
        openEffect: 'elastic',
        closeEffect: 'elastic'
    });

    SetTimeout("parent.$.fancybox.close({ href: '#thx' });", timeout);

    setTimeout(function() {
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize('#contact'),
            success: function(response) {
                console.log(response)
            },
        });
    }, timeout);
});
Post Views: 3
Scroll to Top