مهمان عزیز خوش آمدید. ورود ثبت نام



صفحه‌ها (4):
امتیاز موضوع:
  • 2 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
ساخت پنجره ورود زیبا modal login box نسخه ویرایش شده

ساخت پنجره ورود زیبا [modal login box] (نسخه ویرایش شده)
به نام خدا

با سلام؛
آموزشی که براتون قرار میدم،آموزش ساخت یک پنجره ورود بسیار زیبا با استفاده از jQuery هست؛لازم به ذکر هست که این آموزش نسخه ویرایش شده آموزش اصلی هست که در این نسخه:
1-گزینه "فراموشی گذرواژه" اضافه شده.
2-نوار عنوان پنجره ورود ویرایش شده؛همچنین تگ های فاصله بندی به جدول اضافه شده تا جعبه ورود زیباتر و مرتب تر بشه و کد بهینه سازی شده.
3-بجای عبارت های فارسی یا انگلیسی،متغیر عبارت ها قرار داده شده تا با تغییر زبان انجمن،عبارات پنجره ورود هم تغییر کنن.

نکته:ابتدا کدها رو در نت پد کپی کرده و بعد به مسیر مورد نظر انتقال بدید!

آموزش: ابتدا به مسیر زیر برید:
قالب ها » قالب مورد نظر » گروه های قالب بندی نشده » 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
 *
 * @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 را باز کرده و کد زیر رو جایگزین کدهای موجود بکنید:

کد پی‌اچ‌پی:
<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 modalthead">
{
$lang->welcome_loginبه {$mybb->settings['bbname']}
</
div>
<
div class="modalContent loginModalContent">
<
form method="post" action="member.php">
<
table cellspacing="{$theme['borderwidth']}cellpadding="{$theme['tablespace']}">
<
tr><td>
{
$lang->login_username}
</
td><td>
<
input type="text" value="" style="width: 200px;" size="25" name="username" class="textbox" id="login_username" />
</
td></tr><tr><td>
{
$lang->login_password}
</
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="{$lang->remember_me_desc}"><input type="checkbox" value="yes" checked="checked" name="remember" class="checkbox">{$lang->remember_me}</label>
</
td><td>
<
input type="submit" value="{$lang->welcome_login}name="submit" class="button" />
<
span class="forgot_password float_left"><a href="{$mybb->settings['bburl']}/member.php?action=lostpw">{$lang->lost_password}</a></span
</
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;} .modalthead{ padding:6px; font-size:12px; font-weight:bold} .modalBox{ position:fixed; width:358px; 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 .modalContent{padding:23px 12px}



تمام؛ حالا شما یک پنجره ورود خیلی زیبا دارید.


نمونه: پیوست شد.

موفق باشید.

 


فایل‌های پیوست
تصاویر بندانگشتی
   
اگه دوست دارید بدون جی‌کوئری از این استفاده کنید از کد زیر استفاده کنید:
کد:
<style>
#mask{ position:fixed; z-index:9010; background-color:#000000; top:0; left:0;width:100%;height:100%;opacity:0.8;} .modalthead{ padding:6px; font-size:12px; font-weight:bold} .modalBox{ position:fixed; width:358px; z-index:9015;top:25%;left:35%; 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 .modalContent{padding:23px 12px}
</style>
<div id="mask" style="display:none" onclick="mybbirloginbox();return false"></div>
<a href="member.php?action=login" name="modal" onclick="mybbirloginbox();return false">{$lang->welcome_login}</a> | <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a>
<div id="loginModal" class="modalBox loginModalBox" style="display:none">
<div class="thead modalthead">
{$lang->welcome_login} به {$mybb->settings['bbname']}
</div>
<div class="modalContent loginModalContent">
<form method="post" action="member.php">
<table cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}">
<tr><td>
{$lang->login_username}
</td><td>
<input type="text" value="" style="width: 200px;" size="25" name="username" class="textbox" id="login_username" />
</td></tr><tr><td>
{$lang->login_password}
</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="{$lang->remember_me_desc}"><input type="checkbox" value="yes" checked="checked" name="remember" class="checkbox">{$lang->remember_me}</label>
</td><td>
<input type="submit" value="{$lang->welcome_login}" name="submit" class="button" />
<span class="forgot_password float_left"><a href="{$mybb->settings['bburl']}/member.php?action=lostpw">{$lang->lost_password}</a></span>
</td></tr></table>
<input type="hidden" value="do_login" name="action" />
<input type="hidden" value="" name="url" />
</form></div></div>
<script>
function mybbirloginbox() {
    if($('mask').style.display == 'none')
    {
        $('mask').show();
        $('loginModal').show();
    }
    else
    {
        $('mask').hide();
        $('loginModal').hide();
    }
}
</script>


دعای خیر برای اعضای گروه مای بی‌بی فارسی را فراموش نکنید!تصویر: http://www.cdn.my-bb.ir/images/smilies-v6/lightbulb.gif

HeartHeart خیلی التماس دعا دارم... دعام کنید لطفا HeartHeart

اگر از گروه مای بی‌بی فارسی راضی هستید، پس لطفا آنرا حمایت کنید: حمایت می‌کنم
عالی دمت گرم
استفاده از دکمه تشکر / اعتبار بهتره دوست عزیز
موفق باشید


تصویر: http://toolsdl.com/banner2.gif
 
باشه آقا جواد جون بخواه
 
با سلام به دوستان

من کمی این فرمو ویرایش کردم و فقط کدهایی که میزارم تغییر بدید

ویرایش : مصطفی صناعی به کمک علیرضا توفیقی

اگه فونت یکان و کودک داشته باشید بهتره

نمونه آنلاین : آبیـ ـنما

نمونه:
تصویر: http://up.wikivb.ir/images/qmwbowhgj1qpesf99k1z.png
اما مراحل انجام تغییرکد ها :

1 - قالب ها » قالب مورد نظر » Header Templates » قالب header_welcomeblock_guest را باز کرده و کد زیر رو جایگزین کدهای موجود بکنید:
کد پی‌اچ‌پی:
<div id="mask"></div>
_-_  <a href="{$mybb->settings['bburl']}/member.php?action=login" name="modal" rel="#loginModal">ورود به انجمن</a>   -_-_  <a href="{$mybb->settings['bburl']}/member.php?action=register">عضویت در انجمن</a>  _-_
<div id="loginModal" class="modalBox loginModalBox">
<
div style="padding-right:8px;padding-top:8px;font-size:17px;"ورود به انجمن </div>
<
hr>
<
div class="modalContent loginModalContent">
<
form method="post" action="member.php">
<
table cellspacing="{$theme['borderwidth']}cellpadding="{$theme['tablespace']}">
<
tr><td>
<
div class="float_right"><img src="images/user.png" style="width: 33px;height: 33px;margin-top:2px;"></div><input type="text" value="نام کاربری" style="width: 200px;border:1px solid #fff;border-radius:5px;" size="25" name="username" class="textbox" id="login_username" onMouseOver="value=&quot;&quot;" onMouseOut=" if(value==''){value='نام کاربری';}" />
</
td>
<
td>
<
div class="float_right"><img src="images/pass.png" style="width: 33px;height: 33px;margin-top:2px;"></div><input type="password" value="رمز عبور" style="width: 200px;border:1px solid #fff;border-radius:5px;" size="25" name="password" class="textbox" id="login_password" onMouseOver="value=&quot;&quot;" onMouseOut=" if(value==''){value='رمز عبور';}" />
</
td>
<
td><input type="submit" value="ورود به آبیـ ـنما" name="submit" class="button" style="font-size: 19px;font-family: BYekan" /></td>
</
tr>
</
table>
<
hr>
<
div align="center" style="padding-right:8px;padding-top:8px;font-size:17px;color:#616060"><a href="{$mybb->settings['bburl']}/member.php?action=lostpw">{$lang->lost_password}</a></div>
<
input type="hidden" value="do_login" name="action" />
<
input type="hidden" value="" name="url" />
</
form></div></div
<
span style="float: left;">{$lang->welcome_current_time}</span
2 - پوسته ها » پوسته موردنظر » global.css » حالت پیشرفته
کد پی‌اچ‌پی:
#mask{
    
position:absolute;
    
z-index:9010;
    
background-color:#000000; 
    
display:none;
    
top:0;
    
left:0;
}
.
modalBox{
    
position:fixed
    
width:670px
    
display:none
    
z-index:9015;
    
background:#dddddd;
        
border:2px solid #fff; 
    
-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 .modalContent{
    
padding:23px 12px;



تصویر: https://pardazit.net/images/pardazit.net-468-60.gif
عاغا من اینو گذاشتم ولی کار نمیکنهHuhHuh


بــی تو تنهــــــام
اره  ما هم تست کردیم کار نمیکنه جی کویریش و میره تو یه صفحه دیگه که صفحه ورود به انجمن هست !‌
مشکل از کجاست ؟‌Huh


تصویر: http://up.janat-pc.com/do.php?img=623
نمونه آنلاین که کار میکنه

شما باید کارای Big Goal رو کامل انجام بدید بعدش کدایی که گذاشتمو تغییر بدید


تصویر: https://pardazit.net/images/pardazit.net-468-60.gif
ابتدا به مسیر زیر برید:
قالب ها » قالب مورد نظر » گروه های قالب بندی نشده » headerinclude

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

این 2 کد   Big-Goal  که وارد میکنیم زمان ذخیره سازی قالب این پغام رو میده ..

خطا(ها)ی زیر رخ داده است:
  • یک مشکل امنیتی در این قالب یافت شد. لطفاً تغییراتی را که در قالب داده‌اید بررسی کنید و یا با گروه MyBB جهت پشتیبانی تماس بگیرید
HuhHuh


تصویر: http://up.janat-pc.com/do.php?img=623
صفحه‌ها (4):


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش ساخت صفحه رزومه mellat 7 1,424 ۲۱ اردیبهشت ۱۳۹۴، ۰۶:۰۶ ب.ظ
آخرین ارسال: Masoud_MI
  آموزش ساخت ادامه مطلب برای سردر Tofighi 2 2,023 ۳۰ آذر ۱۳۹۱، ۰۸:۰۶ ب.ظ
آخرین ارسال: WhiteCrow

پرش به انجمن:


کاربران در حال بازدید این موضوع:

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir