PHP output inside a CSS modal

Asked

Viewed 432 times

1

Hello, I’m trying to put the result of a quiz made only with PHP and some JS (used only to hide the previous question and show the next one) inside a modal, made only with HTML and CSS, because I’m building a site where I have only HTML, PHP and CSS available. Here’s what I got so far: 

$totalcerto = 0;

if ($resposta1 == "B") { $totalcerto++; }
if ($resposta2 == "D") { $totalcerto++; }
if ($resposta3 == "A") { $totalcerto++; }
if ($resposta4 == "B") { $totalcerto++; }
if ($resposta5 == "A") { $totalcerto++; }

echo "$totalcerto / 5 respostas corretas";

?>

this is my PHP, I would like this variable $totalcerto to appear within a modal, thanks for your attention.

php css modal

  • Use Bootstrap: http://getbootstrap.com/javascript/#modals

  • You’ve already made the modal appear?

2 answers

1

The question is a little old, but come on.

First, I recommend the use of bootstrap, which will already make your work much easier. After placing the files in the folder and creating their references in your file create a modal (can be at the bottom of the page) with the following structure:

<div class="modal fade" tabindex="-1" role="dialog"> <!-- Esse modal já é oculto-->
  <div class="modal-dialog">
    <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">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

In the html structure above, put your php content (in the $totalcerto case) inside the div tag with class = 'modal-body', use php the normal way, as you would on any html page.

To call the modal, just create inside the tag <head> that script:

<script>
$(function(){
   $('#myModal').on('shown.bs.modal', function () {
     $('#myInput').focus();
   })
})
</script>

Just one remark, your php code does not seem to be efficient, because If you have about 10 questions, you would have to repeat that code 10 times so that your variable $totalcerto could add the amount of hits

1

First create your modal with HTML and CSS, and leave it hidden, I suppose you already know how to do this, in case you don’t know just ask what put the code.

After you have created your php variable $totally certain as done above, put the following JS:

document.getElementById('modal').innerHTML = "<?PHP echo $totalcerto; ?>";

Important

This JS needs to be at the end of the body or in the onload event, otherwise the div with the modal id will not exist yet, so it will be returned Undefined. Then just create a function to show the modal when the user finishes the quiz.

Browser other questions tagged php css modal

You are not signed in. Login or sign up in order to post.