سلام دوستان ،
من با alpinejs یک modal درست کردم. و به صورت کامل صحیح هم کار میکنه .
مشکل اینجاست که :
کاربر وقتی میخواد عکس پروفایل یا هر چیزی آپلود کنه یه modal باز بشه و با cropperjs اون عکس رو برش بدم بعد بقیه کارها رو انجام بدم.
یعنی وقتی کاربر تصویر رو از طریق کد زیر وارد کرد .اون پاپ آپ باز بشه
<input class="imageUpload" name="imageUpload" id="imageUpload" type="file"/>
$("body").on("change", ".imageUpload", function (e) {
console.log('test code');
Alpine.data('showModal', () => ({
showModal: true,
}));
});
اینم کد modal
<template x-cloak x-if="showModal" @keydown.window.escape="showModal = false">
<div class=" fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog"
aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
@click="showModal = false"
aria-hidden="true">
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"></span>
<div
class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div>
<div class="cropper-box">
<img id="image" src="">
</div>
</div>
<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
<button type="button"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
@click="open = false">
Deactivate
</button>
<button type="button"
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
@click="open = false">
Cancel
</button>
</div>
</div>
</div>
</div>
</template>
( اینم بگم با tailwindcss طراحی کردم قالب رو )
@sinashahoveisi
@hadikhanian
@endworld
@hesammousavi
سلام وقت بخیر
نمیخوام کد رو کامل برام بنویسید فقط راهنمایی کنید پیدا میکنم
الان راکت برای تصویر پروفایل کاربران از روشی که من گفتم استفاده کرده
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟