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
Yusril, I'm assuming you already have the modal login code pasted in your [b]header_welcomeblock_guest/b]. You want to find the following code;
Login at {$mybb->settings['bbname']}

You want to paste the following above it;
<div style="float: right"><a rel="closeModal" href="#">Close</a></div>
how to move the close button?
Just change the template to style it as you wish.
I've read all the post, can you help me getting the lost password beside the login button. Thank You!
I works fine but when I open a discussion I will disappear from the editor where there are buttons bold, corstivo, stressed etc.

The problem is that code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 

how to solve this problem?
You need to make sure you add the jQuery NoConflict code to the headerinclude where jQuery is.
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 type="text/javascript">
$(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>
(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">
/**
 * Modal Boxes JS
 *
 * @author Euan T. <[email protected]>
 * @version 1.0.0
 */

jQuery.noConflict();

jQuery(document).ready(function($)
{
    // Make the jQuery modal login redirect you back to the page you're currently on //
    $('#loginModal input[name="url"]').attr("value", window.location);
    // /Login redirect //

    // Modal Boxes //
    $('a[name="modal"]').on('click', function(event)
    {
        event.preventDefault();
        
        var target = $(this).attr('rel');
        
        // Set up the shadowing
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width': maskWidth, 'height': maskHeight});
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow", 0.8);  
        
        // Position the actual modal
        var winH = $(window).height();
        var winW = $(window).width();
        $(target).css('top',  (winH / 2) - ($(target).height() / 2));
        $(target).css('left', (winW / 2) - ($(target).width() / 2));
        $(target).fadeIn(2000); 
    });
    
    $('.modalBox a[rel="closeModal"]').on('click', function(event)
    {
        event.preventDefault();
        $('#mask, .modalBox').hide();
    }); 
    
    $('#mask').on('click', function ()
    {
        $(this).hide();
        $('.modalBox').hide();
    }); 
    // /Modal Boxes //
});
</script> 
my code worked but I do not know where to put the no conflict
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