秦皇岛设计网站：构建情态动词使用纯CSS使用CSS模态

2019.09.05 秦皇岛设计网站

133

在网页设计中,你需要有好的内容的组织。这有助于用户更具可读性和功能信息。这可以通过建立一个整洁和整洁的布局在网站上。组织内容,有许多界面元素和结构可以使用模态对话框就是其中之一。

如果你一直用jQuery创建模态对话框或其他插件,我们有一些好消息告诉你。与 CSS模态库,你只需要纯粹的CSS。

汉斯·克里斯蒂Reinl, 发达的人 CSS模态 ,包括很多优势。的一些优势是,它可以用作SASS插件,有跨浏览器支持,优化的移动,它可以插入与媒体(图像、视频和声音),小而快。

几乎所有现代浏览器的支持 CSS模态。测试在Chrome, Firefox, Safari,歌剧12,IE8, IE9 + Windows Phone 8, iOS和Android。虽然仍然有一些小问题为Android 2.3 ( 滚动是最大的问题,在写作的时候),它仍然运转良好。

推荐阅读: 每个设计师都应该有50个有用的CSS代码

CSS模态工作有三个部分: 标题,内容和页脚。的头就是你可以把标题模态。内容是你想突出显示重要的信息。这部分支持文本、图片和嵌入代码。至于页脚 ,您可以添加额外的信息,比如关闭按钮,一个开放的新窗口按钮,等等。

创建一个模态对话框中,您应该使用部分标记和一些预定义的数据属性内部类和id。部分包装标签,一个元素 .modal-inner 类必须包括。这是基本的标记:

<部分类=“语义内容” id=“modal-id” tabindex=“1”

角色=“对话框” aria-labelledby=“modal-label” aria-hidden=“真正的”>

<头 id=“modal-label”>< ! ——标题- - >头>

<页脚>< ! ——页脚- - >页脚>

div>

<一个 href=“# !” 类=“modal-close” 标题=“关闭这个模态” 数据紧密=“关闭”

data-dismiss=“模态”>×< /一个>

部分>

的 id 在部分标签是用于调用另一个函数的模态,例如一个链接,可以根据需要改变的价值。一个标签上的代码,将被用作模态关闭按钮。的属性 href 应该离开如上所示,它将阻止页面点击时滚动到顶部。

的头和页脚是可选的部分,你可能(也可能不)包括。但请记住,如果您使用一个头,您必须添加一个惟一的ID名称和改变 aria-labelledby 属性相同的值。

别忘了包括 CSS模态从GitHub库,您可以下载页面你的项目。

<头>

. .

<链接 rel=“样式表” href=“css / modal.css”>

. .

头>

仍有一些问题当你使用CSS模态与纯CSS,如:

为了解决这些问题,仍然需要javascript。幸运的是,CSS模态为你提供了一个轻量级的javascript 源代码为你的便利。包含这个代码之前关闭身体标签。

1	<脚本类型=“text / javascript” src=“js / modal.js”>脚本>

秦皇岛设计网站用纯CSS创建模态仍有一些缺点,但它可以成为另一种工具来进一步丰富你的网站。你可能想尝试不同的东西。只要有一点创造力,你可能会使一些很了不起的情态动词。试一试。