Load modal after form submit

Instead of echoing the script why not just detect your form submit with javascript and then display the modal?

Something like

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

(If you're using JQuery)


Instead of calling modal show method upfront let all the assets load first then call the modal show method.

echo "<script>
         $(window).load(function(){
             $('#thankyouModal').modal('show');
         });
    </script>";

First problem i see in your example code is, unnecessary \ on following code.echo "<script> \. Remove it

Second: Are you including all required js and css files for boostrap modal? If you are not Please update the code with following lines of code

<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>

At last there is no event triggered to open boostrap modal. Add following code to trigger the modal.

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

Final code :

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>";

Hope this helps.