制作iOS14风格的卡贴弹窗
近几年,iOS的设计风格已经成为了全球范围内的模板。iOS 14引入的新的设计元素中,卡贴弹窗(Sheet)和PickerView是比较出彩的一个部分。在本文中,我们将介绍如何使用HTML、CSS和JavaScript来模仿这一设计,实现一个跨平台的卡贴弹窗。
制作卡贴弹窗的HTML结构
卡贴弹窗作为一种常见设计元素,看上去比较复杂,但实际上仅是一个放置于页面中央的div,其中包含标题、内容和按钮等几个元素。按照惯例,我们先写出HTML的结构。
在这个结构中,我们看到了class名称,这是可以用CSS来达到样式定制的方式。
用CSS定义样式
在这个设计中,卡贴弹窗的整体背景色为半透明黑色,所以我们可以使用一些未定义的颜色,比如#444444,来实现。CSS样式代码如下:
可以看到,在其中使用了position来定义了卡贴弹窗中元素的位置,同时也通过padding来设置给元素的内边距。
用JavaScript控制逻辑
最后,我们需要一个脚本文件,来控制这个设计的各个逻辑点。
``` var sheetModal = document.querySelector('.sheet-modal'); var sheetTitle = document.querySelector('.sheet-title'); var sheetContent = document.querySelector('.sheet-content'); var cancelButton = document.querySelector('.sheet-btn-cancel'); var submitButton = document.querySelector('.sheet-btn-submit'); var submitCallback; function closeSheet() { sheetModal.style.display = 'none'; } cancelButton.addEventListener('click', closeSheet); submitButton.addEventListener('click', function () { submitCallback(); closeSheet(); }); function sheet(data) { sheetTitle.innerHTML = data.title; sheetContent.innerHTML = data.content; submitCallback = data.confirm; sheetModal.style.display = 'flex'; } ```在这个代码片段中,我们可以看到,定义了一个函数sheet,当函数被调用时,传递的参数中包括了弹窗的标题、内容以及确认按钮的回调函数。在点击确认按钮时,就会触发回调函数,并关闭弹窗。
在HTML结构和CSS样式的共同作用下,完美展示了iOS14中的卡贴弹窗,而使用JavaScript的函数来控制弹窗逻辑的部分,让这一设计变得非常实用。希望本篇文章可以为你的网站设计带来一些启示。