MyBB Community Forums

Full Version: Adding a modal login box to MyBB using jQuery
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
(2012-12-20, 09:36 AM)Mr_Soul Wrote: [ -> ]You can edit this my headerinclude code for login box?


<script type="text/javascript">
<!--
	var cookieDomain = "{$mybb->settings['cookiedomain']}";
	var cookiePath = "{$mybb->settings['cookiepath']}";
	var cookiePrefix = "{$mybb->settings['cookieprefix']}";
	var deleteevent_confirm = "{$lang->deleteevent_confirm}";
	var removeattach_confirm = "{$lang->removeattach_confirm}";
	var loading_text = '{$lang->ajax_loading}';
	var saving_changes = '{$lang->saving_changes}';
	var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
	var my_post_key = "{$mybb->post_code}";
	var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 jQuery.noConflict();

$(document).ready(function() {
	$('a.login-window').click(function() {
		
                //Getting the variable's value from a link 
		var loginBox = $(this).attr('href');

		//Fade in the Popup
		$(loginBox).fadeIn(300);
		
		//Set the center alignment padding + border see css style
		var popMargTop = ($(loginBox).height() + 24) / 2; 
		var popMargLeft = ($(loginBox).width() + 24) / 2; 
		
		$(loginBox).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		
		// Add the mask to body
		$('body').append('<div id="mask"></div>');
		$('#mask').fadeIn(300);
		
		return false;
	});
	
	// When clicking on the button close or the mask layer the popup closed
	$('a.close, #mask').live('click', function() { 
	  $('#mask , .login-popup').fadeOut(300 , function() {
		$('#mask').remove();  
	}); 
	return false;
	});
});
</script>

You might have to change all the $ to jQuery - not sure, I don't use jQuery with MyBB.
ah ok thanks Big Grin i must change all.
Only the ones in the jQuery code for the login box - don't go changing the MyBB variables
Unfortunately, I have added no conflict ... does not give me the problem but the editor does not work the login box ... shame ... because I liked the graphics.
Why don't you just follow the tutorial?

All the code you need is right there in the first post.
He's right you too: D apparently love to complicate things hehe
I see you have round corners so do I but I have white tips.

http://gyazo.com/5bc4a7221211110c43de1c1ddd83b5d5.png

The above pic was taken from a post on this thread, posted by Trickshot.
You'll need to round the actual corners of the modal box to match the rounding radius of your .thead.
(2013-01-13, 10:54 PM)Euan T. Wrote: [ -> ]You'll need to round the actual corners of the modal box to match the rounding radius of your .thead.

I'm confused, have a round corner image for the .thead or add some code(if so where)?
As much as I love this edit, I am having problems with it. Everything is fine apart from when I go to edit a post I no longer have the "quick edit" "full edit" buttons (I made them CSS rather then images) and my editor looses all the features and is just a text box. (Editor is unmodified and is the default editor)

Once I removed the edits and put the theme back everything was fine.

Any suggestions?
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26