jQuery message

Here are simple steps to follow on how the plugin works

Step 1: Include css and js into the head section of the page (put js at the bottom of the page)

<link href="style.css" rel="stylesheet" type="text/css" />
      
      <script src="js/jquery-3.6.0.min.js"></script>
      <script src="js/jquery-migrate-3.3.2.min.js"></script>
      
      <script src="js/jquery_message_box.js"></script>
      <script>
        $(document).ready(function() {
          /*-----Alert-----*/
          $('.alert_warning').TnControl('alert_msg', {
            'message_type' : 'warning',
            'message_text' : '<strong>Lorem Ipsum : </strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s when an'
          });
          $('.alert_error').TnControl('alert_msg', {
            'message_type' : 'error',
            'scroll_effect' : false
          });
          $('.alert_information').TnControl('alert_msg', {
            'message_type' : 'information'
          });
          $('.alert_success').TnControl('alert_msg', {
            'scroll_effect' : false
          });
          /*-----Confirm----*/
          $('.confirm_warning').TnControl('confirm_msg', {
            'message_type' : 'warning',
            'message_text' : '<strong class="yellow">Lorem Ipsum : </strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s when an',
            'scroll_effect' : false
          });
          $('.confirm_error').TnControl('confirm_msg', {
            'message_type' : 'error'
          });
          $('.confirm_information').TnControl('confirm_msg', {
            'message_type' : 'information',
            'scroll_effect' : false
          });
          $('.confirm_success').TnControl('confirm_msg', { });
          /*-----Notification-----*/
          $('.notification_warning').TnControl('notification_msg', {
            'message_type' : 'warning',
            'animation_setting' : [2000, 10]
          });
          $('.notification_error').TnControl('notification_msg', {
            'message_type' : 'error'
          });
          $('.notification_information').TnControl('notification_msg', {
            'message_type' : 'information',
            'animation_setting' : [4000, 10]
          });
          $('.notification_success').TnControl('notification_msg', { });
          /*-----Callback-----*/
          $('.callback_warning').TnControl('callback_msg', {
            'message_type' : 'warning',
            'message_text' : '<strong class="yellow">Lorem Ipsum : </strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s when an',
            'scroll_effect' : false
          });
          $('.callback_error').TnControl('callback_msg', {
            'message_type' : 'error'
          });
          $('.callback_information').TnControl('callback_msg', {
            'message_type' : 'information'
          });
          $('.callback_success').TnControl('callback_msg', {
            'scroll_effect' : false
          });
        });
      </script>

Step 2: Include html in the body tag of the page.

<table>
          <tbody>
            <tr>
              <td></td>
              <td class="highlight">for Warning message</td>
              <td class="highlight">for Error message</td>
              <td class="highlight">for Informative message</td>
              <td class="highlight">for Success message</td>
            </tr>
            <tr>
              <td class="highlight right">Examples for Alert message</td>
              <td><span class="demo alert_warning">Demo</span></td>
              <td><span class="demo alert_error">Demo</span></td>
              <td><span class="demo alert_information">Demo</span></td>
              <td><span class="demo alert_success">Demo</span></td>
            </tr>
            <tr>
              <td class="highlight right">Examples for Confirm message</td>
              <td><span class="demo confirm_warning">Demo</span></td>
              <td><span class="demo confirm_error">Demo</span></td>
              <td><span class="demo confirm_information">Demo</span></td>
              <td><span class="demo confirm_success">Demo</span></td>
            </tr>
            <tr>
              <td class="highlight right">Examples for Notification</td>
              <td><span class="demo notification_warning">Demo</span></td>
              <td><span class="demo notification_error">Demo</span></td>
              <td><span class="demo notification_information">Demo</span></td>
              <td><span class="demo notification_success">Demo</span></td>
            </tr>
            <tr>
              <td class="highlight right">Examples for Callback Option Box</td>
              <td><span class="demo callback_warning">Demo</span></td>
              <td><span class="demo callback_error">Demo</span></td>
              <td><span class="demo callback_information">Demo</span></td>
              <td><span class="demo callback_success">Demo</span></td>
            </tr>
          </tbody>
        </table>