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.