مرجع پارسی MyBB

نسخه‌ی کامل: آموزش ایجاد پنجره ورود خیلی زیبا modal login box
شما درحال مشاهده‌ی نسخه‌ی متنی این صفحه می‌باشید. مشاهده‌ی نسخه‌ی کامل با قالب‌بندی مناسب.
سلام به همه دوستان امیدوارم این آموزش تو سایت نباشه خیلی گشتم دنبالش ولی خوب نبود
1:ابتدا فایل پیوست شده رو در هاست به پوشه jscripts جهت لود کردن اخرین کتابخانه jquery انتقال بدین

2:به مسیر زیر برین

کد php:
(ACP Templates Style Templates Your template Set Ungrouped Templates headerinclude

و کد زیر را به پایین کدها اضافه کنیین

کد php:
<script type="text/javascript" src="jscripts/jquery-1.7.2.min.js"></script

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

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

حالا به مسیر زیر برین

کد php:
(ACP Templates Style Templates Your template Set Header Templates header_welcomeblock_guest

و کدهای زیر رو با کدهای موجود عوض کنین



کد php:
<div id="mask"></div>
Welcome guestPlease <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="username">Username:</label>
                    </
td>
                    <
td>
                        <
input type="text" value="" style="width: 200px;" maxlength="30" size="25" name="username" class="textbox" />
                    </
td>
                </
tr>
                <
tr>
                    <
td>
                        <
label for="password">Password:</label>
                    </
td>
                    <
td>
                        <
input type="password" value="" style="width: 200px;" size="25" name="password" class="textbox" />
                    </
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

حالا به مسیر زیر برین
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;
    } 

چند نکته من این کارها رو از چند سایت جمع کردم تو سایت مادر هم بود حالا خودتون میتونین
اونو شخصی کنین شکلشو عوض کنین

[تصویر:  80900305093276377800.jpg]

[تصویر:  01354625345863333186.jpg]

اینم از کتابخانه jquery-1.7.2.min







برای قسمت کدهای مهمان تو بخش هیدر از کدهای زیر استفاده کنید تا فارسی بشه

کد php:
<div id="mask"></div>
مهمان گرامی به {$mybb->settings['bbname']} خوش امدید </br> </br><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="username">نام کاربری:</label>
                    </
td>
                    <
td>
                        <
input type="text" value="" style="width: 200px;" maxlength="30" size="25" name="username" class="textbox" />
                    </
td>
                </
tr>
                <
tr>
                    <
td>
                        <
label for="password">رمز عبور:</label>
                    </
td>
                    <
td>
                        <
input type="password" value="" style="width: 200px;" size="25" name="password" class="textbox" />
                    </
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="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
نظرتون در مورد نمونه سایت من چیه؟
www.iranmy.ir
سایت قشنگی دارین شبیه تم inspaierd هست اما پیشرفته شده
پلاگین هم داره
که developer نوشتن
با سلام
من می خواهم فایل رو دانلود کنم پسورد می خواد.چی باید وارد کنم؟
رمز فایل:yousef
نمونه بذارید لطفا