مرجع پارسی MyBB

نسخه‌ی کامل: [آموزش] پنجره ورود زیبا با استفاده از jQuery
شما درحال مشاهده‌ی نسخه‌ی متنی این صفحه می‌باشید. مشاهده‌ی نسخه‌ی کامل با قالب‌بندی مناسب.
درود بر دوستان ,

پنجره ورود زیبایی رو دیدم گفتم بذارم شما هم استفاده کنید و لذت ببرید .

نکته : ابتدا کد ها را در Notepad کپی سپس در قالب خود بریزید .

توجه: قبل از انجام کارها لطفا بک آپ بگیرید .

آموزش :

ابتدا به مسیر زیر بروید :
(ACP > Templates & Style > Templates > Your template Set > Ungrouped Templates > headerinclude)
پنل مدیر کل >> قالب ها >> قالب مورد نظر >> قالب‌های گروه بندی نشده >> headerinclude >> را باز کرده و کد زیر را در آخر کد های موجود کپی کنید .

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

سپس کد های زیر را هم به ذیل کد های بالا قرار دهید .

کد php:
<script type="text/javascript">
/**
 * Modal Boxes JS
 *
 * @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 Templates سپس از زیر منوی آن header_welcomeblock_guest را انتخاب و کدهای زیر را به جای کدهای موجود جایگزین کنید .

کد php:
<div id="mask"></div>
میهمان گرامی خوش آمدید ! <a href="{$mybb->settings['bburl']}/member.php?action=login" name="modal" rel="#loginModal">{$lang->welcome_login}</aیا <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a>
<
div id="loginModal" class="modalBox loginModalBox">
    <
div class="thead">
        
پنجره ورود {$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" title="اگر این گزینه را تیک بزنید دفعه بعد که وارد انجمن شدید نیاز به وارد کردن مجدد نام کاربری و گذرواژه  نیست سیستم گذرواژه شما را ذخیره میکند "><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 >> را باز کرده , و یرایش قالب بندی: حالت پیشرفته را انتخاب و کدها را در انتهای کد های موجود کپی کنید .

کد php:
#mask {
    
positionabsolute;
    
z-index9010;
    
background-color#000000;
    
displaynone;
    
top0;
    
left0;
}

.
modalBox {
    
positionfixed;
    
width440px;
    
displaynone;
    
z-index9015;
    
background#ffffff;
    
border1px solid #000000;
    
-webkit-box-shadow0px 7px 10px 0px rgba(0,0,0,0.81);
    -
moz-box-shadow0px 7px 10px 0px rgba(0,0,0,0.81);
    
box-shadow0px 7px 10px 0px rgba(0,0,0,0.81);
}
    .
modalBox .thead {
        
font-weightbold;
    }
    .
modalBox .modalContent {
        
padding5px 10px;
    } 

[تصویر:  photos.png] نمونه:
موفق باشید
منبع : http://community.mybb.com/thread-117646-page-1.html