Αυτός ο οδηγός σας δίνει τη δυνατότητα να δημιουργήσετε ένα pop-up παράθυρο σύνδεσης δίχως να ανακατευθύνεστε στον σύνδεσμο της κανονικής σελίδας της σύνδεσης. Το pop-up παράθυρο λοιπόν εμφανίζεται χωρίς να αλλάζει η σελίδα.
 Δημιουργία του script
Πηγαίντε στον Πίνακα Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript
H διαχείριση του κώδικα Javascript πρέπει να είναι ενεργοποιημένη.
Δημιουργήστε ένα νέο script με τις παρακάτω ιδιότητες:
Τίτλος: Ό,τι επιθυμείτε
Τοποθέτηση: Σε όλες τις σελίδες
Κώδικας:
- Κώδικας:
$(function() {
if (_userdata["session_logged_in"] == "0") {
/* PERSONNALISATION DES TEXTES */
var txt_username = "Ψευδώνυμο μέλους",
txt_password = "Κωδικός",
txt_login = "Σύνδεση",
txt_remember = "Να γίνεται η σύνδεσή αυτόματα σε κάθε μου επίσκεψη",
txt_guest = "Δεν είστε εγγεγραμμένος/η",
txt_create = "Θέλετε να κάνετε εγγραφή;",
txt_lost = "Έχετε ξεχάσει τον κωδικό σας;",
txt_recover = "Ανακτήστε τον";
/* FIN DE PERSONNALISATION - Ne rien modifier ci-après */
$('body').prepend('<div id="quickloginform_overlay" style="display:none;z-index:2147483647"></div><div id="quickloginform" style="display:none;z-index:2147483647"><form id="fa-login-form" class="login-form" name="form_login" method="post" action="/login"><input type="text" maxlength="40" name="username" placeholder="' + txt_username + '" required=""><input type="password" maxlength="32" name="password" placeholder="' + txt_password + '" required=""><button name="login">' + txt_login + '</button><label><p>' + txt_remember + ' <input type="checkbox" style="vertical-align: middle;" name="autologin"></p></label><p style="float:left; text-align:left;">' + txt_guest + '<br><a href="/register">' + txt_create + '</a></p><p style="float:right; text-align:right;">' + txt_lost + '<br><a href="/profile?mode=sendpassword">' + txt_recover + '</a></p><div style="clear:both;"></div><input name="redirect" value="' + window.location.pathname + '" type="hidden"></form></div>');
$('a[href*="/login"]').click(function() {
$('#quickloginform, #quickloginform_overlay').fadeIn();
$('#quickloginform input[name="username"]').focus();
return false;
});
$(document).click(function(e) {
if ($(e.target).closest('#quickloginform form').length === 0) {
$('#quickloginform, #quickloginform_overlay').fadeOut();
}
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$('#quickloginform, #quickloginform_overlay').fadeOut();
}
});
}
});
Τροποποίηση του script
Οι λέξεις στο αρχικό τμήμα του script μπορούν να τροποποιηθούν:
- Κώδικας:
var txt_username = "Ψευδώνυμο μέλους",
txt_password = "Κωδικός",
txt_login = "Σύνδεση",
txt_remember = "Να γίνεται η σύνδεσή αυτόματα σε κάθε μου επίσκεψη",
txt_guest = "Δεν είστε εγγεγραμμένος/η",
txt_create = "Θέλετε να κάνετε εγγραφή;",
txt_lost = "Έχετε ξεχάσει τον κωδικό σας;",
txt_recover = "Ανακτήστε τον";
Αν το τροποποιήσετε, θυμηθείτε να προσθέτετε τα εισαγωγικά (").
Προσθήκη CSS
Για να έχετε την εμφάνιση που δόθηκε στην παραπάνω εικόνα, πρέπει να προσθέσετε τον παρακάτω κώδικα.
Πηγαίντε στον Πίνακα Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet και προσθέστε:
- Κώδικας:
#quickloginform_overlay {
background-color:#333;
height:100%;
left:0;
opacity:0.7;
position:fixed;
top:0;
width:100%;
}
#quickloginform {
height:100%;
position:fixed;
top:20%;
width:100%;
}
#quickloginform>form {
background-color:#fff;
box-sizing:border-box;
margin:auto;
padding:20px 30px;
width:360px;
border-radius:3px;
}
#quickloginform input[type="password"],#quickloginform input[type="text"] {
background:#f2f2f2 none repeat scroll 0 0;
border:0 none;
box-sizing:border-box;
font-family:"Helvetica";
font-size:14px;
margin:0 0 15px;
outline:0 none;
padding:15px;
width:100%;
}
#quickloginform button {
background-color:#369fcf;
border:0 none;
color:#ffffff;
cursor:pointer;
font-family:"Helvetica";
font-size:14px;
outline:0 none;
padding:15px;
text-transform:uppercase;
width:100%;
}
#quickloginform p:nth-child(n) {
margin-bottom:0;
margin-top:20px;
text-align:center;
}
#quickloginform form p {
color:#b3b3b3;
font-size:11px;
}
#quickloginform form a {
color:#2b86b3;
text-decoration: none;
}
Μπορείτε να τροποποιήσετε την εμφάνιση του παραθύρου όπως εσείς επιθυμείτε. Το χρώμα του κουμπιού της σύνδεσης είναι αρχικά το παρακάτω: #369fcf. Μπορεί να αλλάξει στη 38η σειρά του παραπάνω κώδικα.
Αυτό το script λειτουργεί από εδώ και στο εξής. Μπορείτε να το δοκιμάσετε κάνοντας αποσύνδεση από το φόρουμ σας και έπειτα κάνοντας κλικ στο κουμπί της σύνδεσης.
Τεχνικές Σημειώσεις:
- Το παράθυρο ανοίγει από οποιονδήποτε σύνδεσμο που οδηγεί στην σύνδεση ενός χρήστη,
- Το παράθυρο κλείνει είτε κάνοντας κλικ έξω από αυτό ή πατώντας το πλήκτρο ESC του πληκτρολογίου σας,
- Μόλις συνδεθείτε μεταφέρεστε στην σελίδα στην οποία ήσασταν πριν συνδεθείτε.
|
Φόρουμ
1η θέση: 3000 πιστωτικές μονάδες (credits)
2η θέση: 2000 πιστωτικές μονάδες (credits)
3η θέση: 1000 πιστωτικές μονάδες (credits)
