Site Message with Dismiss Button

by Hug - 23-01-2015, 06:03 AM
Closed Account
Posts:
2,764
Joined:
Jan 2015
Likes:
142
Credits:
1,898
Reputation:
26
3 Years of Service
#1
OP
Posted: 23-01-2015, 06: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
The last reply on this thread is older than a month. Please do not unnecessarily bump it.
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Login
Log into an existing account.
1 Guest(s)