1 Востаннє редагувалося Віктор X (23.08.2018 15:33:40)

Тема: Закриття модульного вікна

Добрий день друзі. Чи можете Ви підказати як прописати і де, що б після відправки форми модульне вікно пропадало
[code=JavaScript]
$(document).ready(function() {
    $('[data-submit]').on('click', function(e) {
        e.preventDefault();
        $(this).parent('form').submit();
    })
    $.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        "Please check your input."
    );


    function valEl(el) {

        el.validate({
            rules: {
                tel: {
                    required: true,
                    regex: '^([\+]+)*[0-9\x20\x28\x29\-]{5,20}$'
                },
                name: {
                    required: true
                },
                email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                tel: {
                    required: 'Поле обязательно для заполнения',
                    regex: 'Телефон может содержать символы + - ()'
                },
                name: {
                    required: 'Поле обязательно для заполнения',
                },
                email: {
                    required: 'Поле обязательно для заполнения',
                    email: 'Неверный формат E-mail'
                }
            },

            submitHandler: function(form) {
                $('#loader').fadeIn();
                var $form = $(form);
                var $formId = $(form).attr('id');
                switch ($formId) {
                    case 'popupResult':
                        $.ajax({
                                type: 'POST',
                                url: $form.attr('action'),
                                data: $form.serialize(),
                            })
                            .always(function(response) {
                                setTimeout(function() {
                                    $('#loader').fadeOut();
                                }, 800);
                                setTimeout(function() {
                                    $('#overlay').fadeIn();
                                    $form.trigger('reset');
                                    //строки для остлеживания целей в Я.Метрике и Google Analytics
                                }, 1100);
                                $('#overlay').on('click', function(e) {
                                    $(this).fadeOut();
                                });

                            });
                        break;
                }
                return false;
            }
           
        })
    }
    $('.js-form').each(function() {
        valEl($(this));
    });
});
[/code]
___________________________________________________
[code=HTML]
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <form action="success.php" class="js-form" id="popupResult">
                    <input type="text" name="target">
                    <input type="text" name="name" placeholder="Имя">
                    <input type="text" name="email" required placeholder="Введите E-mail"  class="form-control form__field">
                    <input type="text" name="tel" required placeholder="Введите телефон"  class="form-control form__field">
                    <button type="submit">Отправить</button>
                </form>
            </div>
        </div>
    </div>
</div>
[/code]

2

Re: Закриття модульного вікна

Прихований текст

і не гидко вам працювати на москаликів?

спробуйте запихнути цей код в тег code, аби зручніше читати було, і ще можете вказати, в якій частині кода те модульне вікно відкривається?

3

Re: Закриття модульного вікна

$(function() {
    $('button.btn-lg').click(function() {
        var parent = $(this).attr('data-parent');
        var modal = $(this).attr('data-target')
        $(modal).find('input[name=target]').val(parent);
    })
});

$(document).ready(function() {
    $('[data-submit]').on('click', function(e) {
        e.preventDefault();
        $(this).parent('form').submit();
    })
    $.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        "Please check your input."
    );


    function valEl(el) {

        el.validate({
            rules: {
                tel: {
                    required: true,
                    regex: '^([\+]+)*[0-9\x20\x28\x29\-]{5,20}$'
                },
                name: {
                    required: true
                },
                email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                tel: {
                    required: 'Поле обязательно для заполнения',
                    regex: 'Телефон может содержать символы + - ()'
                },
                name: {
                    required: 'Поле обязательно для заполнения',
                },
                email: {
                    required: 'Поле обязательно для заполнения',
                    email: 'Неверный формат E-mail'
                }
            },

            submitHandler: function(form) {
                $('#loader').fadeIn();
                var $form = $(form);
                var $formId = $(form).attr('id');
                switch ($formId) {
                    case 'popupResult':
                        $.ajax({
                                type: 'POST',
                                url: $form.attr('action'),
                                data: $form.serialize(),
                            })
                            .always(function(response) {
                                setTimeout(function() {
                                    $('#loader').fadeOut();
                                }, 800);
                                setTimeout(function() {
                                    $('#overlay').fadeIn();
                                    $form.trigger('reset');
                                    //строки для остлеживания целей в Я.Метрике и Google Analytics
                                }, 1100);
                                $('#overlay').on('click', function(e) {
                                    $(this).fadeOut();
                                });

                            });
                        break;
                }
                return false;
            }
            
        })
    }
    $('.js-form').each(function() {
        valEl($(this));
    });
});
<!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            <form action="success.php" class="js-form" id="popupResult">
                <input type="text" name="target">
                <input type="text" name="name" placeholder="Имя">
                 <input type="text" name="email" required placeholder="Введите E-mail"  class="form-control form__field">
                    <input type="text" name="tel" required placeholder="Введите телефон"  class="form-control form__field">
                <button type="submit">Отправить</button>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Индикация процесса отправки формы -->
    <div id="loader">
        <img src="img/ripple.svg">
    </div>
    
    <!-- Сообщение "спасибо" после отправки формы -->
    <div id="overlay">
        <div id="thx">
            Спасибо! Мы обязательно вам перезвоним
        </div>
       </div>

Відкривается при натисканні на кнопку button

<button class="btn btn-primary btn-lg" data-parent="Кнопка в третьем экране" data-toggle="modal" data-target="#myModal">Заказать</button>

4

Re: Закриття модульного вікна

Спробуйте

$("#myModal").modal()

5

Re: Закриття модульного вікна

$("#myModal").modal("hide");

оця команда заховає ваше модальне вікно.
Вставте її в потрібному місці