Соответствующая страница здесь: http://marcmurray.net/test_sites/cans/news.php

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

До сих пор я пытался отобразить весь сценарий, запустить сценарий, изменить хэш в URL-адресе и проверить его, который работал в других областях сайта.

Добавление функций, таких как оповещения и отображение текста на странице, работает нормально, но когда я использую метод show, он не работает. Это наводит меня на мысль, что я либо неправильно экранирую символы, либо неправильно понимаю, как работают модалы. Кто-нибудь может увидеть, где я облажался?

PHP:

<?php
if(isset($_POST["submit"])) {
        // Checking For Blank Fields..
    if($_POST["vname"]==""||$_POST["vemail"]==""||$_POST["sub"]==""||$_POST["msg"]==""){
       echo "Please fill out everything! We need to know who you are, and why you want to get in touch with us!";}
    else
        {
        // Check if the "Sender's Email" input field is filled out
        $email=$_POST['vemail'];
                // Sanitize E-mail Address
        $email =filter_var($email, FILTER_SANITIZE_EMAIL);
                // Validate E-mail Address
        $email= filter_var($email, FILTER_VALIDATE_EMAIL);
        $emailConfirmed=$_POST['vemail'];
        if (!$email){
          echo "Don't forget to include your email adress! Otherwise we can't get back to you.";
                }
                else
                {
                    $subject = $_POST['sub'];
                    $message = $_POST['msg'];
                    $headers =  'From:' . $emailConfirmed . "\r\n"; // Sender's Email
                    $headers .= 'Cc:' . $emailConfirmed . "\r\n"; // Carbon copy to Sender
                    // Message lines should not exceed 70 characters (PHP rule), so wrap it
                    $message = wordwrap($message, 70);
                    // Send Mail By PHP Mail Function
                    mail("marc.murray.92@gmail.com", $subject, $message, $headers);
                    echo "<script>$('#thankyouModal').modal('show')</script>";
                };
    }
 }
?>

HTML для модального стиля

<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Thank you for pre-registering!</h4>
      </div>
      <div class="modal-body">
          <p>Thanks for getting in touch!</p>                     
      </div>    
    </div>
  </div>
</div>

РЕДАКТИРОВАТЬ: Обновлен код, чтобы быть проще, чем первоначальный вопрос.

15
ladanta 18 Дек 2015 в 22:14

13 ответов

Лучший ответ

Вместо вызова метода modal show, сначала загрузите все ресурсы, а затем вызовите метод modal show.

echo "<script>
         $(window).load(function(){
             $('#thankyouModal').modal('show');
         });
    </script>";
12
Swarnendu Paul 22 Дек 2015 в 19:45

Вы можете попробовать как

$('#thankyouModal').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
 $('#thankyouModal').modal('show'); //Open the model
});
1
NewUser 5 Фев 2016 в 13:29

Запишите следующий код. Если вы используете JQuery.

success: function(data)
    {
        $("#myModal").modal("show");
    }
0
Jitender Sharma 31 Мар 2020 в 09:06

Я обнаружил, что класс .in (устанавливает непрозрачность в 1), который, я считаю, должен быть установлен Bootstrap, не отображается после отправки формы.

$('.modal').show().addClass('in');

Btw . у вас ошибка в консоли

$(...).parsley(...).on is not a function
1
Covik 21 Дек 2015 в 17:49

Первая проблема, которую я вижу в вашем примере кода, заключается в том, что в следующем коде нет необходимости \ echo "<script> \. Убери это

Второе: включаете ли вы все необходимые файлы js и css для начальной загрузки? Если это не так, пожалуйста, обновите код с помощью следующих строк кода

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Наконец, нет события, запускаемого для запуска модального бутстрапа. Добавьте следующий код, чтобы вызвать модальное.

$(window).load(function(){
     $('#myModal').modal('show');
});

Окончательный код:

echo "<script>
            var newHTML = document.createElement ('div');
            newHTML.innerHTML =
            newHTML = document.createElement ('div');
            newHTML.innerHTML = ' <div id=\"myModal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\"> <div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"></div>';
            document.body.appendChild (newHTML);
            $(window).load(function(){
                 $('#myModal').modal('show');
            });
        </script>";

Надеюсь это поможет.

2
mhrilwan 18 Дек 2015 в 20:28

Вместо того, чтобы повторять сценарий, почему бы просто не обнаружить отправку вашей формы с помощью javascript, а затем отобразить модальный режим?

Что-то типа

$("form").on('submit', function(){
   $('.modal').show();
})

(Если вы используете JQuery)

7
Tyler Pope 18 Дек 2015 в 20:22

Разместите эти ссылки в вашем теге HEAD:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

А затем измените это:

<script>$('#thankyouModal').modal('show')</script>

Чтобы :

$(document).ready(function(){
<script>$('#thankyouModal').modal('show')</script>
});
1
Robinson Legaspi 28 Дек 2015 в 07:59

Может быть, это проблема ..

 echo "<script>$('#thankyouModal').modal('show')</script>";

Я бы сделал это ....

$var =   "<script>$(document).ready(function(){
             $('#thankyouModal').modal('show')
          });</script>";

А потом распечатайте его в правой части внутри вашего HTML-шаблона.

Использование вашего параметра и добавление $ (document). Уже внутри скрипта, который вы выводите, не думаю, что это сработает ... проблема с последним вариантом заключается в том, что вы откроете скрипт, но jquery может быть еще не полностью загружен, и он не распознает его ,

Поэтому я предлагаю отправить его в качестве параметра, а затем распечатать.

Если вы не используете фреймворк и вам трудно передать параметр, вы можете сделать это с помощью URL-адреса и сделать что-то вроде моего project.com/result.php?submit=true

И на вашем интерфейсе вы будете читать эту переменную

Подобно

if(isset($_GET["submit"]) && ($_GET["submit"]) ){
//echo your modal script 
}
1
jpganz18 21 Дек 2015 в 18:02

Возможно, вам следует отправить форму через ajax, поэтому после отправки события вам не нужно обновлять страницу.

Пока вы не обновите страницу, ваш мод будет загружен успешно.

0
LetsSeo 28 Дек 2015 в 12:13
$('#thankyouModal').submit(function(e) {
    e.preventDefault(); // don't submit multiple times
    this.submit(); // use the native submit method of the form element
     $('#thankyouModal').modal('show'); //Open the model
});

Или Вы можете вручную создать кнопку после отправки формы и нажать эту кнопку, чтобы открыть модальное окно.

$('#thankyouModal').click(function(e) {
        e.preventDefault(); // don't submit multiple times
        $("form").submit(); // use the native submit method of the form element
 $('<button type="button" id="btnThankYou" class="hidden" data-toggle="modal" data-target="#thankyouModal">ThankYouButton</button>').appendTo('body');

//This will click the button and open the modal
    $("#btnThankYou" ).trigger("click");
    });
1
Anil Panwar 26 Дек 2015 в 11:31
<?php
   if(isset($_POST["submit"])) {
    // Checking For Blank Fields..
   $checkpost = false;
if($_POST["vname"]==""||$_POST["vemail"]==""||$_POST["sub"]==""||$_POST["msg"]==""){
   echo "Please fill out everything! We need to know who you are, and why you want to get in touch with us!";}
else
    {
    // Check if the "Sender's Email" input field is filled out
    $email=$_POST['vemail'];
            // Sanitize E-mail Address
    $email =filter_var($email, FILTER_SANITIZE_EMAIL);
            // Validate E-mail Address
    $email= filter_var($email, FILTER_VALIDATE_EMAIL);
    $emailConfirmed=$_POST['vemail'];
    if (!$email){
      echo "Don't forget to include your email adress! Otherwise we can't get back to you.";
            }
            else
            {
 $checkpost = true;
                $subject = $_POST['sub'];
                $message = $_POST['msg'];
                $headers =  'From:' . $emailConfirmed . "\r\n"; // Sender's Email
                $headers .= 'Cc:' . $emailConfirmed . "\r\n"; // Carbon copy to Sender
                // Message lines should not exceed 70 characters (PHP rule), so wrap it
                $message = wordwrap($message, 70);
                // Send Mail By PHP Mail Function
                mail("marc.murray.92@gmail.com", $subject, $message, $headers);
                echo "<script>$('#thankyouModal').modal('show')</script>";
            };
}

}?>

В html

<?php if($checkpost){ ?>
<script>
$('.modal').show();
</script>
<?php } ?>
0
Junaid 28 Дек 2015 в 13:11
$modal =   "<script>$(document).ready(function(){
         $('#thankyouModal').modal('show')
      });</script>";


if(isset($_GET["submit"]) && ($_GET["submit"]) ){
 // after running other script
 echo $modal; 
}
1
Satyam S 28 Дек 2015 в 11:49

Я знаю, что уже слишком поздно, чтобы ответить. Но, надеюсь, это может помочь другим.

Приведенный ниже код работал для меня, где я использую шаблон Post-Redirect-Get. Откройте модальное после отправки формы.

window.onpageshow = function() {
    if (typeof window.performance != "undefined"
        && window.performance.navigation.type === 0) {
         $('#myModal').modal('show');
    }
}
0
PragmaticFire 21 Дек 2018 в 03:33