Trigger Bootstrap Modal with Java Script / PHP Code

bootstrap tutorial

Trigger Bootstrap Modal with Java Script / PHP Code- Hello readers, today I would like explain about how to create bootstrap modal controller from java script/php. Some things will make us to use this method, such as error handling, alerts (success, warning, etc), and input form that uses data stored in java script or php. This following is examples I use in error handling in Flat Portfolio Login Template 

Flow 

if username or password not right, check-login.php will be send the error message to login page. 

then after  login page receive error massage , we have to get the message to be used as a trigger in displaying the modals. this code is part to call the modal (errModal)

 <?php
 if (isset($_GET['error'])) : ?>
 <!-- open modal-->
 <script type="text/javascript">
     $(window).load(function(){
       $('#errModal').modal({
          show: true
       });
     });
 </script>
 <?php endif;?>

<!-- Modal -->
  <div class="modal fade" id="errModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Error</h4>
        </div>
        <div class="modal-body">
          <p>You have entered an invalid login </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button>
        </div>
      </div>
      
    </div>
  </div>

Don't forget to include  latest jquery lib . because the basic of this function is located in javascript.
Ok, thats all for the explanation. If you have a question, feel free to comment here!

Share this post

Related Post

Trigger Bootstrap Modal with Java Script / PHP Code

4/ 5

Oleh Nina Dee

Nina Dee 2:23 AM Komentar