MyBB Community Forums

Sounds like some sort of jQuery conflict. Could you post your URL with the edit in place?

(2013-01-16, 05:46 PM)Euan T. Wrote: [ -> ]Sounds like some sort of jQuery conflict. Could you post your URL with the edit in place?

I have sent a PM with details in and I have just re-did the edits.

Thanks for any help.

---

Update: This guy doesn't only make amazing plugins/edits but also offers great support. Thank you for the fix.

+rep

Euan, could you please answer my question?

(2013-01-14, 04:11 AM)kamz89 Wrote: [ -> ]

(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)?

When your Theme is using round corners per CSS, then you must only add .modalBox in your global or separate .css were your round corner css code is. Something like this:

Quote:.modalBox,
input.textbox,
select,
textarea,
.editor_control_bar,
fieldset,
.popup_menu {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

As said above. I provided the information you needed, but did not give you a full walkthrough. If you have no interest in trying to learn then that's not my problem.

/rant

(2013-01-17, 02:06 PM)Euan T. Wrote: [ -> ]As said above. I provided the information you needed, but did not give you a full walkthrough. If you have no interest in trying to learn then that's not my problem.

/rant

Yeah but I didn't understand as I'm not some pro coder. I tried adding a border radius and that code but didn't work. Now I figured out what I didn't add.

Somehow, My form isn't able to post.


I used a custom layout at first and it didn't seem to work.

Then i opened the original modalbox like in the tut.
And i also doesn't post.

Any leads on what to do?

EDIT: Link removed, Fixed! Thanks for the wonderful tutorial!

how to enter each code above?
whether to create a new file in javascript

error message, how to solve the problem on the following message

[attachment=28554]

That error has nothing to do with this tutorial. It is caused because you are running PHP 5.4 which isn't fully supported yet until we release MyBB 1.6.10.

Oh yes my PHP 5.4.7

oh so
please master @Euan T. explain to me in detail how to enter the above code if the code I have the following:

headerinclude

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/top-nav.js"></script>
{$stylesheets}
<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 language="javascript" type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/myadvertisements.js"></script>

header_welcomeblock_guest

<ul class="beta-header">
<script type="text/javascript">
<!--
	lang.username = "{$lang->login_username}";
	lang.password = "{$lang->login_password}";
	lang.login = "{$lang->login}";
	lang.lost_password = "<a href=\"{$mybb->settings['bburl']}/member.php?action=lostpw\" class=\"lost_password\">{$lang->lost_password}<\/a>";
	lang.register_url = "<a href=\"{$mybb->settings['bburl']}/member.php?action=register\" class=\"register\">{$lang->welcome_register}<\/a>";
	lang.remember_me = "{$lang->remember_me}";
// -->
</script>

<li><a href="{$mybb->settings['bburl']}/member.php?action=login">Login</a></li>
<li><a href="{$mybb->settings['bburl']}/member.php?action=register">Register</a></li>
</ul>

and how to put the code you created above

<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> 

<div id="mask"></div>
Welcome guest! Please <a href="{$mybb->settings['bburl']}/member.php?action=login" name="modal" rel="#loginModal">{$lang->welcome_login}</a> or <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a>
<div id="loginModal" class="modalBox loginModalBox">
    <div class="thead">
        Login at {$mybb->settings['bbname']}
    </div>
    <div class="modalContent loginModalContent">
        <form method="post" action="member.php">
            <table border="0" width="100%">
                <tr>
                    <td>
                        <label for="login_username">Username:</label>
                    </td>
                    <td>
                        <input type="text" value="" style="width: 200px;" maxlength="30" size="25" name="username" class="textbox" id="login_username" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="login_password">Password:</label>
                    </td>
                    <td>
                        <input type="password" value="" style="width: 200px;" size="25" name="password" class="textbox" id="login_password" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="smalltext" title="If ticked, your login details will be remembered on this computer, otherwise, you will be logged out as soon as you close your browser."><input type="checkbox" value="yes" checked="checked" name="remember" class="checkbox"> Remember?</label>
                    </td>
                    <td>
                        <input type="submit" value="Login" name="submit" class="button" />
                    </td>
                </tr>
            </table>
            <input type="hidden" value="do_login" name="action" />
            <input type="hidden" value="" name="url" />
        </form>
    </div>
</div> 

to the problem I've understood css


you try to open my website here http://www.kampoeng.us
and saw there was a navigation login, how to make a visitor want to login login box will appear as you create.

sorry my english a little messy
thanks in advance