秦皇岛设计网站:构建情态动词使用纯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代码

HTML标记

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

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

1
2
3.
4
5
6
7
8
9
10
11
12
<部分 类=“语义内容” id=“modal-id” tabindex=“1”
        角色=“对话框” aria-labelledby=“modal-label” aria-hidden=“真正的”>
 
    <div 类=“modal-inner”>
        <头 id=“modal-label”>< ! ——标题- - >头>
        <div 类=“模式内容”>< ! ——情态动词内容- - >div>
        <页脚>< ! ——页脚- - >页脚>
    div>
 
    <一个 href=“# !” 类=“modal-close” 标题=“关闭这个模态” 数据紧密=“关闭”
        data-dismiss=“模态”>×< /一个>
部分>

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


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

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

1
2
3.
4
5
<头>
. .
<链接 rel=“样式表” href=“css / modal.css”>
. .
头>

额外的Javascript

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

  • IE 8的兼容性问题

  • 键盘逃跑按钮退出

  • 滚动背景预防

  • 焦点效应和模态页面后关闭它

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

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

最后认为

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


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP