Created
June 6, 2024 11:00
-
-
Save humayunahmed8/943c2053e181f43421c8419e9b8a48a6 to your computer and use it in GitHub Desktop.
Tailwind Modal | Display the login alert modal for purchasing in the logged-out state
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a id="ultimate-buy-now" class="group relative flex items-center justify-center px-5 h-10 text-white bg-gradient-to-br from-cyanGreen-800 to-cyan-800 rounded-full transition-all duration-300" href="<?php echo is_user_logged_in() ? '/checkout?plan=ultimate&billing_cycle=monthly' : '#'; ?>"> | |
<span>Buy Now</span> | |
</a> | |
<a id="pro-buy-now" class="group relative flex items-center justify-center px-5 h-10 text-white bg-gradient-to-br from-cyanGreen-800 to-cyan-800 rounded-full transition-all duration-300" href="<?php echo is_user_logged_in() ? '/checkout?plan=pro&billing_cycle=monthly' : '#'; ?>"> | |
<span>Buy Now</span> | |
</a> | |
<!-- Login Modal --> | |
<div id="login-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden"> | |
<div class="font-sans antialiased fixed bottom-0 inset-x-0 px-4 pb-4 sm:inset-0 sm:flex sm:items-center sm:justify-center"> | |
<div class="fixed inset-0 transition-opacity"> | |
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
</div> | |
<div class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full"> | |
<!-- Close Icon --> | |
<button id="close-modal" class="absolute top-0 right-0 mt-2 mr-2 text-gray-500 hover:text-gray-700"> | |
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> | |
</svg> | |
</button> | |
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
<div class="sm:flex sm:items-start"> | |
<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> | |
<svg class="h-6 w-6 text-red-600" stroke="currentColor" fill="none" viewBox="0 0 24 24"> | |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> | |
</svg> | |
</div> | |
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> | |
<h3 class="text-lg leading-6 font-medium text-gray-900"> | |
Please Log In to Continue | |
</h3> | |
<div class="mt-2"> | |
<p class="text-sm leading-5 text-gray-500"> | |
You need to log in to purchase a subscription plan. Please sign in to your account or create a new account to continue. | |
</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
<span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto"> | |
<button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-gradient-to-br from-cyanGreen-800 to-cyan-800 text-base leading-6 font-medium text-white hover:to-green-900 focus:outline-none border-green-900 transition ease-in-out duration-150 sm:text-sm sm:leading-5"> | |
Sign Up | |
</button> | |
</span> | |
<span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto"> | |
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-green-900 focus:shadow-outline transition ease-in-out duration-150 sm:text-sm sm:leading-5"> | |
Sign In | |
</button> | |
</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script> | |
var isUserLoggedIn = <?php echo $login_status; ?>; | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function () { | |
// Function to show the modal with animation | |
function showModal() { | |
$('#login-modal').fadeIn(300); // Fade in over 300ms | |
} | |
// Function to hide the modal with animation | |
function hideModal() { | |
$('#login-modal').fadeOut(300); // Fade out over 300ms | |
} | |
$(document).ready(function() { | |
$('#pro-buy-now, #ultimate-buy-now').click(function(event) { | |
if (!isUserLoggedIn) { | |
event.preventDefault(); // Prevent the default action of the anchor tag | |
showModal(); // Show the modal with animation | |
} | |
}); | |
// Hide the modal when clicking outside of it | |
$(document).click(function(event) { | |
if (!$(event.target).closest('#login-modal, #pro-buy-now, #ultimate-buy-now').length) { | |
hideModal(); // Hide the modal with animation | |
} | |
}); | |
// Prevent closing the modal when clicking inside the modal | |
$('#login-modal').click(function(event) { | |
event.stopPropagation(); | |
}); | |
// Hide the modal when clicking the close button | |
$('#close-modal').click(function() { | |
hideModal(); // Hide the modal with animation | |
}); | |
}); | |
}); |
Author
humayunahmed8
commented
Jun 6, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment