产品详情弹窗 Tailwind网站组件

<section class="py-16 bg-white"> <div class="max-w-6xl mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12 text-gray-900">热门产品</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow cursor-pointer" onclick="openModal('modal-f8g9h1i2', '智能手环', '¥599', '这款智能手环集成了心率监测、步数统计、睡眠分析等多种功能，是您健康生活的好伴侣。')"> <div class="h-48 bg-gradient-to-br from-red-400 to-pink-500"></div> <div class="p-4"> <h3 class="font-semibold text-lg mb-2">智能手环</h3> <p class="text-gray-600 text-sm mb-2">健康监测专家</p> <span class="text-xl font-bold text-red-600">¥599</span> </div> </div> <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow cursor-pointer" onclick="openModal('modal-f8g9h1i2', '蓝牙音箱', '¥299', '高品质蓝牙音箱，360度环绕立体声，防水设计，续航长达12小时。')"> <div class="h-48 bg-gradient-to-br from-blue-400 to-cyan-500"></div> <div class="p-4"> <h3 class="font-semibold text-lg mb-2">蓝牙音箱</h3> <p class="text-gray-600 text-sm mb-2">音质出众</p> <span class="text-xl font-bold text-blue-600">¥299</span> </div> </div> <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow cursor-pointer" onclick="openModal('modal-f8g9h1i2', '无线充电器', '¥199', '支持多种设备的无线充电器，快速充电技术，智能识别设备类型。')"> <div class="h-48 bg-gradient-to-br from-green-400 to-emerald-500"></div> <div class="p-4"> <h3 class="font-semibold text-lg mb-2">无线充电器</h3> <p class="text-gray-600 text-sm mb-2">便捷充电</p> <span class="text-xl font-bold text-green-600">¥199</span> </div> </div> <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow cursor-pointer" onclick="openModal('modal-f8g9h1i2', '智能台灯', '¥399', '护眼智能台灯，可调节色温和亮度，支持语音控制和手机APP控制。')"> <div class="h-48 bg-gradient-to-br from-yellow-400 to-orange-500"></div> <div class="p-4"> <h3 class="font-semibold text-lg mb-2">智能台灯</h3> <p class="text-gray-600 text-sm mb-2">护眼专业</p> <span class="text-xl font-bold text-yellow-600">¥399</span> </div> </div> </div> </div> <div id="modal-f8g9h1i2" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 p-4"> <div class="bg-white rounded-lg max-w-2xl w-full max-h-screen overflow-y-auto"> <div class="p-6"> <div class="flex justify-between items-center mb-6"> <h3 class="text-2xl font-bold" id="modal-title-f8g9h1i2">产品详情</h3> <button onclick="closeModal('modal-f8g9h1i2')" class="text-gray-500 hover:text-gray-700"> <svg class="w-6 h-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"></path> </svg> </button> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="h-64 bg-gradient-to-br from-purple-400 to-pink-500 rounded-lg"></div> <div> <div class="text-3xl font-bold mb-4" id="modal-price-f8g9h1i2">¥599</div> <p class="text-gray-600 mb-6" id="modal-desc-f8g9h1i2">产品描述信息</p> <div class="space-y-4"> <button class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors">立即购买</button> <button class="w-full border border-blue-600 text-blue-600 py-3 rounded-lg hover:bg-blue-50 transition-colors">加入购物车</button> </div> </div> </div> </div> </div> </div> </section> <script>
function openModal(modalId, title, price, description) {
                document.getElementById('modal-title-' + modalId.split('-')[1]).textContent = title;
                document.getElementById('modal-price-' + modalId.split('-')[1]).textContent = price;
                document.getElementById('modal-desc-' + modalId.split('-')[1]).textContent = description;
                document.getElementById(modalId).classList.remove('hidden');
                document.getElementById(modalId).classList.add('flex');
            }
            function closeModal(modalId) {
                document.getElementById(modalId).classList.add('hidden');
                document.getElementById(modalId).classList.remove('flex');
            }
</script>