如何在 Tailwind 中制作全屏模式
Posted
技术标签:
【中文标题】如何在 Tailwind 中制作全屏模式【英文标题】：How To Make A Full Screen Modal In Tailwind 【发布时间】：2021-10-11 21:35:30 【问题描述】：我正在尝试在 alpine 中使用 Tailwind 构建模式，请指出使用 Tailwind CSS 和 alpine js 构建全屏模式的正确方向
【问题讨论】：
“正确的方向”是，看看文档。 【参考方案1】：结帐TailWind Toolbox
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tailwind CSS Full Screen Modal</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<style>
.modal
transition: opacity 0.25s ease;
body.modal-active
overflow-x: hidden;
overflow-y: visible !important;
.opacity-95 opacity: .95;
</style>
</head>
<body class="bg-gray-900 flex items-center justify-center h-screen">
<button class="modal-open bg-transparent border border-gray-500 hover:border-indigo-500 text-gray-500 hover:text-indigo-500 font-bold py-2 px-4 rounded-full">Open Full Screen Modal</button>
<!--Modal-->
<div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
<div class="modal-overlay absolute w-full h-full bg-white opacity-95"></div>
<div class="modal-container fixed w-full h-full z-50 overflow-y-auto ">
<div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-black text-sm z-50">
<svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
(Esc)
</div>
<!-- Add margin if you want to see grey behind the modal-->
<div class="modal-content container mx-auto h-auto text-left p-4">
<!--Title-->
<div class="flex justify-between items-center pb-2">
<p class="text-2xl font-bold">Full Screen Modal!</p>
</div>
<!--Body-->
<p>Modal content can go here</p>
<!--Footer-->
<div class="flex justify-end pt-2">
<button class="px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2">Action</button>
<button class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Close</button>
</div>
</div>
</div>
</div>
<script>
var openmodal = document.querySelectorAll('.modal-open')
for (var i = 0; i < openmodal.length; i++)
openmodal[i].addEventListener('click', function(event)
event.preventDefault()
toggleModal()
)
const overlay = document.querySelector('.modal-overlay')
overlay.addEventListener('click', toggleModal)
var closemodal = document.querySelectorAll('.modal-close')
for (var i = 0; i < closemodal.length; i++)
closemodal[i].addEventListener('click', toggleModal)
document.onkeydown = function(evt)
evt = evt || window.event
var isEscape = false
if ("key" in evt)
isEscape = (evt.key === "Escape" || evt.key === "Esc")
else
isEscape = (evt.keyCode === 27)
if (isEscape && document.body.classList.contains('modal-active'))
toggleModal()
;
function toggleModal ()
const body = document.querySelector('body')
const modal = document.querySelector('.modal')
modal.classList.toggle('opacity-0')
modal.classList.toggle('pointer-events-none')
body.classList.toggle('modal-active')
</script>
</body>
</html>【讨论】：
以上是关于如何在 Tailwind 中制作全屏模式的主要内容，如果未能解决你的问题，请参考以下文章
React Native：如何使用 expo 在 webview 中制作全屏 youtube 嵌入视频（没有 react-native 链接）