用Tailwind CSS创建模态对话框

在开发网页设计时，要注意的最重要的事情之一是用户互动。这方面的一个很好的例子是使用模态对话框。

模态是一个弹出式窗口，出现在网页的主要内容之上，寻求用户互动。

它出现在主要内容的顶部，迫使用户在继续工作之前与它互动。

模态对话框很有帮助，因为它向用户发出关键警告，作为防止错误的一种方式。

在本教程中，我们将使用Tailwind来创建和设计我们的模态对话框。我们还将使用JavaScript为其添加功能。

该模态对话框将看起来像下面这样。

Modal dialog

先决条件

要完成这篇文章，你将需要具备以下条件。

安装最新版本的Tailwind CSS
对Tailwind CSS的了解
对JavaScript函数的了解

将Tailwind CSS添加到你的项目中

我假设你已经安装了Tailwind。

让我们开始吧!

创建一个将打开模态对话框的按钮

对于你的HTML，确保正确链接你的Tailwind CSS样式表，如下所示。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="./public/tailwind.css" />
	</head>
</html>

接下来，在<body> 标签下添加一个div 容器。它将添加一些内容和一个按钮，当点击时将打开模态对话框。

类别如下所示。

<div class="w-80 mx-auto mt-5 p-7">
	<p class="text-2xl font-medium text-gray-800">
		Click here to open to the modal
	</p>
	<button
		class="bg-green-500 text-white rounded-md px-8 py-2 text-base font-medium hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
		id="open-btn"
	>
		Open Modal
	</button>
</div>

用更简单的话来说，我们已经在我们的页面上添加了指示。指示告诉你要点击它下面创建的按钮。

我们为该按钮创建了一个id -open-btn 。在编写脚本时，它将被用来识别该按钮。

添加一个叠加效果

在大多数网页中，当一个对话框打开时，背景变得不活跃。这意味着，在用户与之交互之前，不能访问模态对话框后面的内容。这被称为叠加效果。

我们只用几行代码就可以创建这种效果，如下图所示。

<!--Overlay Effect-->
<div
	class="fixed hidden inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
	id="my-modal"
></div>

这意味着，当对话框弹出时，该效果将被视为一种褪色的灰色。它也将充满整个屏幕；通过添加类inset-0 。

默认情况下，该效果是通过类hidden 来隐藏的。在模态出现之前，它不会被看到。

还有一个id-my-modal ，将在脚本中使用。

创建模态对话框

在本教程的开头，我们提到模态对话框会给用户以关键的警告。

例如，如果用户想删除一些内容，就会弹出一个窗口，上面有一个问题，如*你确定要删除这个吗？*它带有确定或取消这样的选择。

在这样的模态窗口中，用户需要检查他们是否真的想删除那个特定的东西。如果是，就点击确定按钮，如果不确定就点击取消。

在我们的案例中，我们要创建一个类似于账户成功注册时的弹出窗口。

让我们开始吧。

我们将创建一个div ，在那里我们将放置我们的模态内容。它将充当一个图标、文本和按钮的容器。

这些类将如下所示。

<!--modal content-->
<div
	class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white"
>
	<div class="mt-3 text-center">
		<div
			class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100"
		>
			<svg
				class="h-6 w-6 text-green-600"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M5 13l4 4L19 7"
				></path>
			</svg>
		</div>
		<h3 class="text-lg leading-6 font-medium text-gray-900">Successful!</h3>
		<div class="mt-2 px-7 py-3">
			<p class="text-sm text-gray-500">
				Account has been successfully registered!
			</p>
		</div>
		<div class="items-center px-4 py-3">
			<button
				id="ok-btn"
				class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
			>
				OK
			</button>
		</div>
	</div>
</div>

在上面的代码中。

我们已经添加了一些类，这些类将帮助我们在父</div> 内正确地对齐我们的项目。通过使用类top-20 ，容器被定位在远离顶部边缘的位置。类relative 将使之成为可能。mx-auto 将使之在屏幕上居中。
然后我们将添加另一个子div ，图标、文本和按钮将被放入其中，如下所示。

<div class="mt-3 text-center"></div>

在上面的代码中，这个类。

mt-3 增加了一个12px的上边距。
text-center 把所有的文字都放在中心位置。

现在，让我们添加一些内容，以便我们的样式可以被应用。

我们将为此创建一个<div> ，有以下几个类。

<div
	class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100"
>
	<svg
		class="h-6 w-6 text-green-600"
		fill="none"
		stroke="currentColor"
		viewBox="0 0 24 24"
		xmlns="http://www.w3.org/2000/svg"
	>
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-width="2"
			d="M5 13l4 4L19 7"
		></path>
	</svg>
</div>

该图标的高度和宽度为24px。它也有一个绿色的颜色和一个背景，以使其流行。我们已经添加了mx-auto 、flex 、items-center 、justify-center 等类，以使我们的图标居中对齐。

这就是它在这一点上的样子。

之后，我们将向我们的弹出窗口添加一些内容，如下所示。

<h3 class="text-lg font-medium text-gray-900">Successful!</h3>
<div class="mt-2 text-center">
	<p class="text-sm text-gray-500">Account has been successfully registered!</p>
</div>

h3 标签有以下几个类。

text-lg 添加字体大小为18px。
font-medium 将字体重量改为500。
text-gray-900 将文本的字体颜色改为灰色。

我们添加了div 标签，这样我们就可以将文本对齐，如下图所示。

mt-2 增加一个8px的上边距。
text-center 使文字居中对齐。

现在，我们将添加另一个div ，它将包含OK按钮，如图所示。

<div class="items-center px-4 py-3">
	<button
		id="ok-btn"
		class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
	>
		OK
	</button>
</div>

我们在div 中添加了以下的类。

px-4 和，为x轴增加了16px的填充，为y轴增加了8px的填充。py-3
items-center 将按钮置于容器的中心。

对这个按钮，我们给它一个绿色的背景颜色。因为有了w-full 这个类，它获得了和它的容器一样的宽度。我们使它的边缘变圆，给它一个小阴影和一个悬停效果。

其他的类将在下面解释。

hover:bg-green-600 通过改变背景颜色为绿色，在按钮上添加一个悬停效果。
focus:outline-none 当按钮被点击时，移除轮廓边框。
focus:ring-2 为按钮创建一个轮廓线环。
focus:ring-green-300 创建一个绿色的轮廓环。

为了编写脚本，我们也给了我们的按钮一个ID -ok-btn 。

我们已经完成了模态对话框的设计!

为我们的模态对话框添加功能

我们将使用简单的JavaScript代码为我们创建的按钮添加功能。

我们将通过使用我们之前给它们的唯一标识符来抓取所有我们想要添加功能的元素。

我们将使用<script> 标签在页面的底部添加Javascript。

    // Grabs all the Elements by their IDs which we had given them
    let modal = document.getElementById("my-modal");

    let btn = document.getElementById("open-btn");

    let button = document.getElementById("ok-btn");

我们还想让模态在点击打开按钮时打开，在点击确定按钮时关闭。

这就是我们要做的。

    // We want the modal to open when the Open button is clicked
    btn.onclick = function() {
    modal.style.display = "block";
    }
    // We want the modal to close when the OK button is clicked
    button.onclick = function() {
    modal.style.display = "none";
    }

我们的模态对话框现在已经发挥作用了。

此外，我们想让它在用户点击它以外的任何地方时关闭。

这就是我们要做的。

    // The modal will close when the user clicks anywhere outside the modal
    window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
    }

总结

在本教程中，我们已经通过使用Tailwind CSS来创建和设计我们的模态对话框。我们还学习了如何使用JavaScript函数来使我们的模态对话框发挥作用。

模态对话框是许多可以用来提高用户互动性的例子之一。

如何用Tailwind CSS创建一个模式对话框