باکس ورود جی کوئری _ ویژه

[Hi.joker]

درود
خیلی از دوستان این امکان رو در وی بی دیدن که برای ورود کاربر به انجمن یه باکس زیبا ظاهر میشه که کاربر می تونه در انجمن لاگین کنه
خب با استفاده از این آموزش شما می تونید تا از این امکان در مای بی بی هم استفاده کنید :

ابتدا کدهای زیر رو به
قالب ها و پوسته ها / قالب مورد نظر / قالب های گروه بندی نشده /
داخل headerinclude کپی کنید

کد:

<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
* @www.toolsdl.com
* @for mybbiran users
* @author Euan T. <euan@euantor.com>
* @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>

حالا به جای کدهای موجود در
قالب ها و پوسته ها / قالب مورد نظر / قالب های header
فایل header_welcomeblock_guest ، کد های زیر رو قرار بدید :

کد:

<div id="mask"></div>
خوش آمدید ! لطفا <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">نام کاربری :</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">رمز ورود :</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"><input type="checkbox" value="yes" checked="checked" name="remember" class="checkbox"> رمز عبور به خاطر سپرده شود ?</label>
                    </td>
                    <td>
                        <input type="submit" value="ورود" name="submit" class="button" />
                    </td>
                </tr>
            </table>
            <input type="hidden" value="do_login" name="action" />
            <input type="hidden" value="" name="url" />
        </form>
    </div>
</div>

و در آخر هم کد زیر رو در
قالب ها و پوسته ها / پوسته مورد نظر /
داخل global.css پوسته کپی کنید :

کد:

#mask {
    position: absolute;
    z-index: 9010;
    background-color: #000000;
    display: none;
    top: 0;
    left: 0;
}

.modalBox {
    position: fixed;
    width: 440px;
    display: none;
    z-index: 9015;
    background: #ffffff;
    border: 1px solid #000000;
    -webkit-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
    -moz-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
    box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
}
    .modalBox .thead {
        font-weight: bold;
    }
    .modalBox .modalContent {
        padding: 5px 10px;
    }

این یه نمونه ساده هست و با ویرایش کدهای css می تونید اون رو بسیار زیبا کنید .
منبع : http://community.mybb.com
موفق باشید

[jan123]

منبع یا دتون نره.

[mhy]

ضمن تشکر فراوان
دمو هم اگه بزارن بد نباشه

پ.ن: فکر کنم دوست عزیزمون خودش منبع خیلی از این کدها باشه ...

[Hi.joker]

نمونه :


منبع : http://community.mybb.com
با تشکر

[farzadbj]

سلام
آقا ما تازه کاریم باید چکار کنیم میشه دقیق تر بگید کجا برویم

[Hi.joker]

پست اول ویرایش شد و مسیر ها ذکر شد برای راهنمایی بیشتر

[Amin Yaghubi]

لطفا جستجو کنید سپس تاپیک بزنید !

http://community.mybbiran.com/thread-11439.html

[jan123]

این کدا منبعش تولز دی ال هست ((سایت جدید ت.و.ف.ی.ق.ی م.ح.ر.و.م ش.د.ه))

/**
* Modal Boxes JS
* @www.toolsdl.com
* @for mybbiran users
* @author Euan T. <euan@euantor.com>
* @version 1.0.0
*/

[farzadbj]

سلام اینجا که قالب های گروه بندی نشده ندارد کجاست.

[Amin Yaghubi]

این کدا منبعش تولز دی ال هست ((سایت جدید ت.و.ف.ی.ق.ی م.ح.ر.و.م ش.د.ه))

/**
* Modal Boxes JS
* @www.toolsdl.com
* @for mybbiran users
* @author Euan T. <euan@euantor.com>
* @version 1.0.0
*/

این کد ها در انجمن آقای توفیقی قرار داده شده و این دوستمون از اونجا کپی کرده و اسم سایت mybbiran رو جای xxxx گذاشته

سلام اینجا که قالب های گروه بندی نشده ندارد کجاست.

دوست عزیز شما الان داخل پوسته ها هستی ! قالب ها رو انتخاب کن اونجا میبینی