Site Message with Dismiss Button

Blowjob · 23-01-2015, 07:03 AM

Made this quick tutorial on request of a member from MyBB Community.
http://community.mybb.com/thread-142313-...pid1019332

This will show a global site message to all the users of your site and if they dismiss the message it will not appear again.

Dependency:
1. jQuery Library
2. jQuery Cookie Plugin

Method:
1. Go to your headerinclude template and include the jQuery library (if not already included) and jQuery Cookie plugin. find the code {$stylesheets} and add the following just before that:

Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script type="text/javascript">
 if (typeof jQuery == 'undefined') {
   document.write(unescape("%3Cscript src='http://demonate.com/jscripts/cdn/jquery-1.8.2.min.js' type='text/javascript'%3E%3C/script%3E"));
 }
 </script>
 <script type="text/javascript">jQuery.noConflict();</script>
 <script type="text/javascript" src="http://demonate.net/CDN/Library/jquery.cookie.js"></script>

2. Now open your global.css and add at the end:

Code:
.notebox { padding: 10px; border: 1px solid #FFA600; background: #FFE478; }
 #dismissnote { cursor: pointer; padding: 2px 6px; color: #000; font-weight: 700; border: 1px solid #FFA600; background: rgba(255,255,255,0.5); float: right;}
 #dismissnote:hover { color: #FFF; background: #FFA600; }

3. Open your header template and add at the end:

Code:
<script type="text/javascript">
    jQuery(document).ready(function () {
 
    jQuery('.notebox').hide();
    if(jQuery.cookie("sitenote") != "X") {
        jQuery('.notebox').show();
   };
 
       jQuery("#dismissnote").click(function(event) {
          jQuery('.notebox').hide();
          jQuery.cookie("sitenote","X", {expires: 365});
       });
    });
 </script>

Now in the same template find a suitable location (preferably, before '{$pm_notice}') and add this code:

Code:
<div class="notebox">
 <span id="dismissnote">X</span>
 
 Your supersweet exciting global site message goes here.
 
 </div>

Thats all.

The message will appear this way and once it is closed, the cookie saves the state:

[Image: EwIQza3.png]

Happy Coding :D

Site Message with Dismiss Button

Submitted by Blowjob, 23-01-2015, 07:03 AM, Thread ID: 629