نمایش ارسالهای جدید | نمایش ارسالهای امروز لیست دوستان


زمان کنونی: ۱۹-۹-۱۳۹۵, ۰۶:۲۴ صبح     نام کاربری:    رمز عبور:            
مای بی بی اسکین / پشتیبانی مای بی بی اسکین / عمومی / سوالات و مشکلات v / آموزش ایجاد پنجره ورود خیلی زیبا modal login box


عظیمی ویکیوز

کلمات کلیدی: آموزش, ایجاد, پنجره, ورود, خیلی, زیبا, modal, login,

آموزش ایجاد پنجره ورود خیلی زیبا modal login box
زمان کنونی: ۱۹-۹-۱۳۹۵, ۰۶:۲۴ صبح
علاقه مندی ها

جستجو در موضوع

کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: yasan100
آخرین ارسال: ramin
پاسخ: 9
بازدید: 946

ارسال موضوع  ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش ایجاد پنجره ورود خیلی زیبا modal login box
نویسنده پیام
کاربر سایت
*
نسخه: 1.6.7
http://civil3deng.ir
سپاس ها : 65
 سپاس شده 11 بار در 5 ارسال
ارسال: #1
آموزش ایجاد پنجره ورود خیلی زیبا 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
۱-۳-۱۳۹۱ ۰۸:۱۴ صبح
مشاهده سایت این کاربر یافتن همه ی ارسالهای این کاربر نقل قول این ارسال در یک پاسخ
 سپاس شده توسط Hossein121 ، SheRvin ، shahdebee ، mood ، bozkurt ، mparsa ، Tofighii
نویسنده پیام
کاربر سایت
*
نسخه: 1.6.8
http://plusgamer.ir/
سپاس ها : 35
 سپاس شده 4 بار در 4 ارسال
ارسال: #2
RE: آموزش ایجاد پنجره ورود خیلی زیبا modal login box
خیلی باحال بود

فقط یه سوال وقتی فرم login لود میشه گزینه x برای خروج نداره چطوری بهش اضافه کنم؟!
۷-۳-۱۳۹۱ ۰۶:۵۷ عصر
مشاهده سایت این کاربر یافتن همه ی ارسالهای این کاربر نقل قول این ارسال در یک پاسخ
نویسنده پیام
کاربر سایت
*
نسخه: 1.6.5
http://www.khansariha.com
سپاس ها : 13
 سپاس شده 13 بار در 10 ارسال
ارسال: #3
RE: آموزش ایجاد پنجره ورود خیلی زیبا modal login box
عکس های اسکیرین شات باز نمیشن ؟
۷-۳-۱۳۹۱ ۰۷:۱۶ عصر
مشاهده سایت این کاربر یافتن همه ی ارسالهای این کاربر نقل قول این ارسال در یک پاسخ
نویسنده پیام
کاربر سایت
*
نسخه: 1.6.8
http://plusgamer.ir/
سپاس ها : 35
 سپاس شده 4 بار در 4 ارسال
ارسال: #4
RE: آموزش ایجاد پنجره ورود خیلی زیبا modal login box
کسی نیست جواب ما رو بده؟
۸-۳-۱۳۹۱ ۱۲:۳۹ عصر
مشاهده سایت این کاربر یافتن همه ی ارسالهای این کاربر نقل قول این ارسال در یک پاسخ
نویسنده پیام
کاربر سایت
*
نسخه: 1.6.7
http://civil3deng.ir
سپاس ها : 65
 سپاس شده 11 بار در 5 ارسال
ارسال: #5
RE: آموزش ایجاد پنجره ورود خیلی زیبا modal login box
سلام شرمنده اسکرین شات ها لود میشن
دکمه بستن وجود داره ولی بصورت نوشته هستش
دموی انلاین رو سایت خودم هست رو پوسته بلو پارتی گذاشتم میتونین امتحان کنین
وقت کنم کد کامل استایل رو قرار میدم تو اون دکمه بستن رو بصورت css اضافه کردم
دارم رو زیبا تر کردن صفحه کار میکنم اما زیاد اطلاعات ندارم
۱۰-۳-۱۳۹۱ ۰۶:۰۴ عصر
مشاهده سایت این کاربر یافتن همه ی ارسالهای این کاربر نقل قول این ارسال در یک پاسخ
نویسنده پیام
کاربر سایت
*
نسخه: 1.6.7
http://civil3deng.ir
سپاس ها : 65
 سپاس شده 11 بار در 5 ارسال
ارسال: #6
RE: آموزش ایجاد پنجره ورود خیلی زیبا modal login box
civil3deng.ir
۱۰-۳-۱۳۹۱ ۰۶:۰۵ عصر
مشاهده سایت این کاربر یافتن همه ی ارسالهای این کاربر نقل قول این ارسال در یک پاسخ
نویسنده پیام
کاربر سایت
*
نسخه: 1.6.7
http://civil3deng.ir
سپاس ها : 65
 سپاس شده 11 بار در 5 ارسال
ارسال: #7
RE: آموزش ایجاد پنجره ورود خیلی زیبا modal login box
(۸-۳-۱۳۹۱ ۱۲:۳۹ عصر)ramin نوشته شده توسط:  کسی نیست جواب ما رو بده؟

به جای کدهای قسمت میهمان از کدهای زیر استفاده کنید
کد php:
<table width="100%" border="1">
<
div id="mask"></div>
<
tr>
<
td class="trow1" align="center" valign="middle" width="8%" rowspan="2">
<
img src="images/default.jpg" style="width: 56px;">
</
td>
<
td class="trow1 smalltext" style="height: 21px;">
<
b>{$lang->welcome_guest}</b> &nbsp;
<
ol id="notices"><li id="navbar_notice_1"><font size="2"در صورتی که برای اولین بار  از این سایت بازدید میکنیدلازم است تا <a href="misc.php?action=help" target="_blank"><b>{$lang->toplinks_help}</b></aرا مطالعه فرمایید.</li>
<
liدر صورتی که هنوز عضو نشده اید برای ارسال مطالب ,
    
دانلود فایل هادسترسی به انجمن های ویژه کاربران عضو شده و ... در سایت <a href="{$mybb->settings['bburl']}/member.php?action=register" target="_blank"><b>{$lang->welcome_register}</b></aکنیدبا کلیک بر روی ثبت نام در مدت کوتاهی عضو سایت شده و از مطالب و امکانات سایت بهره مند شوید. </li>
  <
li>در صورتی که عضو سایت هستید  <a href="{$mybb->settings['bburl']}/member.php?action=login" name="modal" rel="#loginModal"><font color="#FF0000"><bاز اینجا وارد سایت شوید</b></font></a></li>
</
ol><span class="float_left">{$lang->welcome_current_time}</span>

</
td>
</
tr></font></table>
<
div id="loginModal" class="modalBox loginModalBox">
    <
div class="thead">
        
ورود به: {$mybb->settings['bbname']}<span class="float_left"><a rel="closeModal" href="#">بستن</a></span>
    </
div>
    </
br><div class="modalContent loginModalContent">
        <
form method="post" action="member.php">
            <
table border="0" width="100%">
                <
tr>
                    <
td>
                        <
label for="username"><font color="blue"><b>نام کاربری:</font></b></label>
                    </
td>
                    <
td>
                        <
input type="text" value="" style="width: 200px;" maxlength="30" size="30" name="username" class="textbox" />
                    </
td>
                </
tr>
                <
tr>
                    <
td></br>
                      &
nbsp;<label for="password"><font color="blue"><b>رمز عبور:</b></font></label>
                    </
td>
                    <
td></br>
                        <
input type="password" value="" style="width: 200px;" size="25" name="password" class="textbox" />
                    </
td>
                </
tr>
                <
tr>
                    <
td>
</
br>                        <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>
</
br>                      <span class="float_left">  <input type="submit" value="Login" name="submit" class="button" /></span>
                    </
td>
</
br>
</
br>                </tr>            </table>
            <
input type="hidden" value="do_login" name="action" />
            <
input type="hidden" value="" name="url" />
        </
form>
    </
div>
</
div></table>>
</
body>
</
html
۱۰-۳-۱۳۹۱ ۰۷:۵۰ عصر
مشاهده سایت این کاربر یافتن همه ی ارسالهای این کاربر نقل قول این ارسال در یک پاسخ
 سپاس شده توسط ramin
نویسنده پیام
کاربر سایت
*
نسخه: 1.6.7
http://civil3deng.ir
سپاس ها : 65
 سپاس شده 11 بار در 5 ارسال
ارسال: #8
RE: آموزش ایجاد پنجره ورود خیلی زیبا modal login box
راستی یه عکس 120×120 هم تو پوشه فرومت آپ کن تا عکس هم بیاد
۱۰-۳-۱۳۹۱ ۰۷:۵۲ عصر
مشاهده سایت این کاربر یافتن همه ی ارسالهای این کاربر نقل قول این ارسال در یک پاسخ
 سپاس شده توسط ramin
نویسنده پیام
کاربر سایت
*
نسخه: 1.6.8
http://plusgamer.ir/
سپاس ها : 35
 سپاس شده 4 بار در 4 ارسال
ارسال: #9
RE: آموزش ایجاد پنجره ورود خیلی زیبا modal login box
ممنون عزیزم لطف کردین :heart:
۱۰-۳-۱۳۹۱ ۰۸:۴۳ عصر
مشاهده سایت این کاربر یافتن همه ی ارسالهای این کاربر نقل قول این ارسال در یک پاسخ
ارسال موضوع  ارسال پاسخ 


موضوع‌های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  یه مشکل خیلی بزرگ پسر پاییزی 8 260 ۲۳-۱-۱۳۹۳ ۰۹:۰۳ عصر
آخرین ارسال: پسر پاییزی
  حل نشده تغيير رمز و عدم ورود به انجمن r8041 1 147 ۵-۱-۱۳۹۳ ۰۵:۱۵ عصر
آخرین ارسال: ! Omid StaR !
  ایجاد پنل متحرک AmIR StaR_PL 3 211 ۵-۱۱-۱۳۹۲ ۱۰:۳۹ عصر
آخرین ارسال: ! Omid StaR !
  یه مشکل خیلی بزرگ دارم ♥ Ali ♥ 2 235 ۲۰-۱۰-۱۳۹۲ ۰۹:۱۴ صبح
آخرین ارسال: ! Omid StaR !
  حل نشده ایجاد بک گراوند برای هدر persiancfc 5 615 ۸-۱۰-۱۳۹۲ ۰۶:۵۶ عصر
آخرین ارسال: ! Omid StaR !
  ورود با پسورد جدید ؟؟؟؟؟!!!!!!!!! بهداد 5 271 ۲۷-۸-۱۳۹۲ ۰۲:۱۸ عصر
آخرین ارسال: Hossein121
  مشکل در ورود به ادمین سی پی ! IMAN.K 1 269 ۲۹-۷-۱۳۹۲ ۱۰:۰۸ عصر
آخرین ارسال: ! Omid StaR !
  مشکل ورود اعضل به سایت neinava 3 324 ۲۵-۷-۱۳۹۲ ۱۰:۴۹ صبح
آخرین ارسال: neinava
  درخواست آموزش قرار دادن پیشوند موضوع در پلاگین آمار پیشرفته Advanced Statistics darya1012 1 297 ۶-۶-۱۳۹۲ ۱۲:۵۶ صبح
آخرین ارسال: ! Omid StaR !
  آپلود پلاگین بدون ورود به فایل مننجر bigclub 1 322 ۱۳-۳-۱۳۹۲ ۰۲:۲۸ عصر
آخرین ارسال: ! Omid StaR !

پرش به انجمن:


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

اخبار فناوری اطلاعات | نرم افزار املاک | نرم افزار دامپزشکی | نرم افزار داروخانه | نرم افزار رستوران | نرم افزار تاکسی سرویس | نرم افزار رستوران | دانلود نرم افزار مطب | دانلود نرم افزار تاکسی سرویس | مجله پزشکی آسان طب | دکتر آسان طب | نرم افزار مطب | نرم افزار دفترچه تلفن نرم افزار چاپ چک نرم افزار رستوران نرم افزار فست فود نرم افزار کافی شاپ نرم افزار تاکسی سرویس نرم افزار نمایشگاه خودرو نرم افزار املاک نرم افزار هتلداری نرم افزار مطب نرم افزار دندانپزشکی نرم افزار انبارداری نرم افزار حسابداری فروشگاه نرم افزار وکالت مجله اینترنتی پارسی وان | مجله اینترنتی زیگیل | خرید بک لینک | سینما تئاتر مای استیج | یک مهاجر | دنیای مهاجرت | مجله گردشگری کاروان | وردپرس دانلود | مجله تفریحی تندیس فان | نرم افزار | جوک جدید | خرید گیفت کارت پلی استیشن | رژیم لاغری | شلوارک لاغری هات شیپر فروشگاه اينترنتي لوازم آرايشي | اخبار هنر | اخبار کامپیوتر | سایت پزشکی | فروشگاه اینترنتی | سایت خبری | دانلود موزیک | اندروید سه | بانک شماره موبایل | پایگاه صالحین | مجله کامپیوتری | جاب لر | سهام نت | تکی کو | تم کد | شرکت تبلیغاتی | مجله خانواده | مجله اینترنتی وبدون | پورتال خبری | سایت تفریحی تک لایو | مجله سرگرمی سیب رنک | تولید کننده روغن زیتون | سایت پزشکی دکتر طب | هتل آپارتمان مشهد | باربری تهران | مشاوره کنکور | خرید هاست | مدرن بوک |

برای درج تبلیغات متنی، بنری و یا رپرتاژ آگهی در این وب سایت با شماره 09370888727 تماس حاصل فرمائید