[برای 1.6] آموزش ایجاد پنجره ورود خیلی زیبا modal login box

[yasan100]

سلام به همه دوستان امیدوارم این آموزش تو سایت نباشه خیلی گشتم دنبالش ولی خوب نبود
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 guest! Please <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 {
    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;
    } 


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

---

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

دانلود 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> 


[Hamed]

نظرتون در مورد نمونه سایت من چیه؟
www.iranmy.ir

[yasan100]

سایت قشنگی دارین شبیه تم inspaierd هست اما پیشرفته شده

[yaser0421]

پلاگین هم داره
که developer نوشتن

[malekt]

با سلام
من می خواهم فایل رو دانلود کنم پسورد می خواد.چی باید وارد کنم؟

[yasan100]

رمز فایل:yousef

[nokte]

نمونه بذارید لطفا