۱۳۹۲/۶/۳۱، ۰۰:۰۹:۵۵ صبح
درود
خیلی از دوستان این امکان رو در وی بی دیدن که برای ورود کاربر به انجمن یه باکس زیبا ظاهر میشه که کاربر می تونه در انجمن لاگین کنه
خب با استفاده از این آموزش شما می تونید تا از این امکان در مای بی بی هم استفاده کنید :
ابتدا کدهای زیر رو به
قالب ها و پوسته ها / قالب مورد نظر / قالب های گروه بندی نشده /
داخل headerinclude کپی کنید
حالا به جای کدهای موجود در
قالب ها و پوسته ها / قالب مورد نظر / قالب های header
فایل header_welcomeblock_guest ، کد های زیر رو قرار بدید :
و در آخر هم کد زیر رو در
قالب ها و پوسته ها / پوسته مورد نظر /
داخل global.css پوسته کپی کنید :
این یه نمونه ساده هست و با ویرایش کدهای css می تونید اون رو بسیار زیبا کنید .
منبع : http://community.mybb.com
موفق باشید
خیلی از دوستان این امکان رو در وی بی دیدن که برای ورود کاربر به انجمن یه باکس زیبا ظاهر میشه که کاربر می تونه در انجمن لاگین کنه
خب با استفاده از این آموزش شما می تونید تا از این امکان در مای بی بی هم استفاده کنید :
ابتدا کدهای زیر رو به
قالب ها و پوسته ها / قالب مورد نظر / قالب های گروه بندی نشده /
داخل 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
موفق باشید
![[تصویر: 0login-modal-exame_38167137983460024424.png]](http://up.vbiran.ir/uploads/0login-modal-exame_38167137983460024424.png)
![[تصویر: 818e4d5bdd6884ca1.png]](http://upload.tehran98.com/upme/uploads/818e4d5bdd6884ca1.png)
