MyBB Community Forums

I meant java script. For some reason MyBB really olive that one up lol. Can I have a link to the site?

(2014-01-18, 09:13 PM)Euan T Wrote: [ -> ]I meant java script. For some reason MyBB really olive that one up lol. Can I have a link to the site?

www.ubergf.com is my website

Yeah, you've added the code incorrectly and code press has worked it's magic on the code anyway. Replace all of the javascript from the first post with the following:

<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 .closeModal').on('click', function(event)
    {
        event.preventDefault();
        $('#mask, .modalBox').hide();
    }); 
    
    $('#mask').on('click', function ()
    {
        $(this).hide();
        $('.modalBox').hide();
    }); 
    // /Modal Boxes //
});
</script> 

(2014-01-18, 09:18 PM)Euan T Wrote: [ -> ]Yeah, you've added the code incorrectly and code press has worked it's magic on the code anyway. Replace all of the javascript from the first post with the following:

<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 .closeModal').on('click', function(event)
    {
        event.preventDefault();
        $('#mask, .modalBox').hide();
    }); 
    
    $('#mask').on('click', function ()
    {
        $(this).hide();
        $('.modalBox').hide();
    }); 
    // /Modal Boxes //
});
</script> 

Your a LIFE SAVER, but there still is a problem, my smiles or click able collapse cats are not working anymore

---

nvm I forgot to take out the piece of code I added earlier all my fault should of check that out before sorry

hi bro, i want to ask, how to edit left, and top


i want to edit login modal float top
thank u

That is set within the JavaScript. Look for the following line and change it as you wish:

        $(target).css('top',  (winH / 2) - ($(target).height() / 2));

This Tut it's not only for the login box great. It's very flexible.
But i ask me, is it possible to load stuff inside the <div> only if it is visible, after click the link like an classic popup? Have atm problem with an iframe, thats in the header and loads every time. And i want it to load first after the modalbox is showing.

(2014-02-18, 06:59 PM)Euan T Wrote: [ -> ]That is set within the JavaScript. Look for the following line and change it as you wish:

        $(target).css('top',  (winH / 2) - ($(target).height() / 2));

The tutorial worked amazing for me Thank you very much!

Is there anyway I could make the borders transparent?

Take a look:



As you can see borders are non trans, they are white >_<

ty <3

EDIT: Fixed borders haha it was easy...

EDIT2: Is there a way to popup login modal on page load instead of clicking login button? thanks

This works properly But i want it to look like buttons as shown in image



thanks

You'll need to add the required CSS classes to the links in that case then. I can't tell you what those classes are.