用AI生成原生Dialog模态框动画效果的提示词示例与代码
代码预览
エディタを読み込み中…
P
提示词
Create a native modal using the HTML <dialog> element with smooth open/close animations (GSAP). Include backdrop customization, focus trapping, and a close button. No libraries for the dialog itself, but use GSAP for entrance/exit transitions.
HTMLのネイティブ<dialog>要素を使って、GSAPアニメーション付きで滑らかに開閉するモーダルの作り方を解説。背景カスタマイズとフォーカストラップも自動で効きます。
提示词解读
这个提示词专注于一个常被忽视却极为实用的原生 HTML 功能——dialog 元素。它要求在不依赖任何弹窗库的前提下，纯粹使用浏览器内置的 dialog 标签实现模态框，同时借助 GSAP 为开启与关闭过程添加流畅的入场和退场动画。提示词还明确要求处理自定义遮罩层样式、焦点捕获（防止用户在模态框打开时通过键盘访问背景内容）以及关闭按钮的交互逻辑，覆盖了一个生产级模态框所需的核心细节。
这个提示词非常适合前端开发者学习如何用更现代、更轻量的方式替代 Bootstrap Modal 或自定义 div 模拟方案。生成的代码可直接用于个人项目、作品集网站或小型 Web 应用，无需引入额外的 UI 框架。如果你想进一步变通，可以在提示词中补充要求：支持 ESC 键关闭、点击遮罩关闭、多个模态框的队列管理，或者将 GSAP 替换为 CSS Keyframes 以减少外部依赖。推荐在 ChatGPT、Claude 或 GitHub Copilot 等具备代码生成能力的模型上使用，效果最佳。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選