Current File : /home/bqrcodec/test2.proid.vn/my custom code//save-contact-button-noti.js
<script>
jQuery(document).ready(function($) {
// --- Global Variables ---
var currentLanguage = 'vi'; // Default language: 'vi' for Vietnamese, 'en' for English
var detectedBrowser = ''; // To store the detected browser name
// --- Language & Image Definitions ---
// Storing messages and images in an object for easier management.
var messages = {
'vi': {
'Facebook In-App Browser': {
text: "Trình duyệt Facebook không cho phép lưu danh bạ. Vui lòng nhấp vào nút ba chấm ở góc trên bên phải và chọn 'Mở trong trình duyệt khác' để lưu danh bạ của bạn.",
image: "https://me.proid.vn/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-20-at-13.02.40_b84c2f40-scaled.jpg"
},
'Zalo In-App Browser': {
text: "Trình duyệt Zalo không cho phép lưu danh bạ. Vui lòng bấm nút 3 chấm ở góc trên bên phải và chọn 'Mở bằng trình duyệt ngoài' để lưu danh bạ.",
image: "https://me.proid.vn/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-20-at-13.02.41_c3e1dd0a-scaled.jpg"
}
},
'en': {
'Facebook In-App Browser': {
text: "The Facebook browser does not allow saving contacts. Please click the three-dot button in the upper right corner and select 'Open in another browser' to save your contacts.",
image: "https://me.proid.vn/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-20-at-13.02.40_b84c2f40-scaled.jpg"
},
'Zalo In-App Browser': {
text: "The Zalo browser does not allow saving contacts. Please click the three-dot button in the upper right corner and select 'Open in another browser' to save your contacts.",
image: "https://me.proid.vn/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-20-at-13.02.41_c3e1dd0a-scaled.jpg"
}
}
};
/**
* Function to detect the browser name.
*/
function getBrowserName() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
var browserName = "Unknown Browser";
if (/zalo/i.test(userAgent)) {
browserName = "Zalo In-App Browser";
} else if (/FBAN|FBAV/i.test(userAgent)) {
browserName = "Facebook In-App Browser";
}
return browserName;
}
/**
* Updates the modal's content (text, image, and language button) based on the current language and browser.
*/
function updateModalContent() {
if (detectedBrowser && messages[currentLanguage] && messages[currentLanguage][detectedBrowser]) {
var browserInfo = messages[currentLanguage][detectedBrowser];
// Set the main informational message
$('#proid-info-modal .proid-info-modal-text').text(browserInfo.text);
// Set the correct image source
$('#proid-info-modal .proid-info-modal-image').attr('src', browserInfo.image);
// Update the language switcher button's text
var switchButtonText = (currentLanguage === 'vi') ? 'View in English' : 'Xem bằng tiếng Việt';
$('.proid-lang-switch').text(switchButtonText);
}
}
/**
* Dynamically creates and injects the custom informational pop-up (modal) and its styles.
*/
function setupInfoModal() {
var modalCSS = `
.proid-info-modal-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.75); display: none;
justify-content: center; align-items: center; z-index: 99999; padding: 15px;
}
.proid-info-modal-content {
background-color: #ffffff; padding: 25px; border-radius: 15px;
text-align: center; max-width: 450px; width: 100%;
box-shadow: 0 8px 30px rgba(0,0,0,0.2);
animation: proid-modal-fadein 0.3s ease-out;
}
@keyframes proid-modal-fadein {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.proid-info-modal-content p {
margin-top: 0; margin-bottom: 20px; color: #333;
line-height: 1.6; font-size: 16px;
}
.proid-info-modal-image {
max-width: 100%; height: auto; border-radius: 8px;
margin-bottom: 25px; border: 1px solid #eee;
}
.proid-info-modal-button {
display: inline-block; width: 100%; padding: 12px 30px;
background: linear-gradient(145deg, #ff416c, #ff4b2b);
color: #fff !important; text-decoration: none !important;
border-radius: 15px; /* MODIFIED: Set border-radius to 15px */
font-weight: bold; border: none; cursor: pointer;
font-size: 18px;
box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
transition: all 0.3s ease;
}
.proid-info-modal-button:hover {
transform: translateY(-3px);
box-shadow: 0 7px 20px rgba(255, 65, 108, 0.6);
}
.proid-lang-switch {
background-color: #f0f2f5;
border: 1px solid #ccd0d5;
color: #333;
cursor: pointer;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
text-decoration: none;
padding: 8px 16px;
border-radius: 20px;
transition: background-color 0.2s ease;
}
.proid-lang-switch:hover {
background-color: #e4e6e9;
}
`;
$('head').append('<style>' + modalCSS + '</style>');
var modalHTML = `
<div id="proid-info-modal" class="proid-info-modal-overlay">
<div class="proid-info-modal-content">
<button class="proid-lang-switch"></button>
<p class="proid-info-modal-text"></p>
<img src="" class="proid-info-modal-image" alt="Instructions">
<button class="proid-info-modal-button">OK</button>
</div>
</div>
`;
$('body').append(modalHTML);
}
// --- Event Listeners ---
// 1. Run the setup function once the document is ready
setupInfoModal();
// 2. Attach a click event listener to the "Save Contact" button.
$(document).on('click', '.save_contact_btn_1', function(e) {
detectedBrowser = getBrowserName();
if (detectedBrowser === "Zalo In-App Browser" || detectedBrowser === "Facebook In-App Browser") {
e.preventDefault(); // Stop the default button action
// Reset to default language (Vietnamese) every time the modal is opened
currentLanguage = 'vi';
// Set the correct content in the modal and show it
updateModalContent();
$('#proid-info-modal').css('display', 'flex');
}
});
// 3. Add event listener for the language switcher.
$(document).on('click', '.proid-lang-switch', function() {
// Toggle the language
currentLanguage = (currentLanguage === 'vi') ? 'en' : 'vi';
// Update the content to reflect the change
updateModalContent();
});
// 4. Add event listener for closing the modal.
$(document).on('click', '.proid-info-modal-button, .proid-info-modal-overlay', function(e) {
// Ensure we don't close it when clicking on the content itself, unless it's the OK button
if (!$(e.target).closest('.proid-info-modal-content').length || $(e.target).hasClass('proid-info-modal-button')) {
$('#proid-info-modal').hide();
}
});
});
</script>