弹窗组件

注意:

此页为于后室维基内部所使用的组件页面。该页面内容可在其它页面中被使用或引用。

评分: +15+x

如何使用

[[module css]]
:root{
    --header: R,G,B!important;/* 主要应用于头部 */
    --body: R,G,B!important;/* 模态框背景部分 */
    --btn-text-color: R,G,B!important;/* 模态框关闭按钮颜色 */
    --text-color: R,G,B!important;/* 模态框大标题颜色 */
    --content-text: R,G,B!important;/* 模态框字体颜色 */
}

/* 触发弹窗超链接样式 */

.anu-style{
/* 样式 */
}
[[/module]]

[[include :backrooms-wiki-cn:component:modal start=--
|none-a=0,1,2(使打开弹窗后底部两个按钮消失某个/全部)(1对应close-O,2对应close-T,0则对应全部按钮)
|title=弹窗打开后的标题
|close-O=关闭文字1
|close-T=关闭文字2
|animation-type=top/bottom/right/left/scale/rotate/Sscale/perspective(top从上方下降到页面中心;bottom从底部上升到页面中心;right从右方到页面中心;left从左方到页面中心;scale在页面中心从小到大显示;rotate在页面中心旋转多次后显示;Sscale从超级大到正常大小;perspective景深动画;不填写默认无动画)
|animation-time=(加速倍速,不加默认0.5s)
]]
此处为弹窗正文
[[include :backrooms-wiki-cn:component:modal end=--]]

本组件的作用

在你文中加入一个按钮,点击后会出现弹窗。

Screenshot_20240503_175609_edit_13454827229955.jpg

Animation-Time

如果你对不想仅仅停留于倍速的话,可以用以下代码来满足你的要求

  • |animation-time=1(1指无加速倍速) + 所增加的时间s
  • |animation-time=1(1指无加速倍速) - 所减少的时间s
  • |animation-time=1(1指无加速倍速) * 所减慢的时间倍速
  • |animation-time=1(1指无加速倍速) / 所加速的时倍倍速

若像这样:|animation-time=(1 + 10)则代表加快11倍,其他同理

示例

例如你想在文段中添加一个上面是红色,文字所在部分为绿色,字体颜色为蓝色,有四行文字且底部无按钮,有缩放动画的的弹窗与让触发弹窗的a元素背景色为红色,的,就可以用这段代码:

[[module css]]
:root{
    --header: 255,0,0!important;
    --body: 0,255,0!important;
    --btn-text-color: 0,0,255!important;
    --text-color: 0,0,255!important;
    --content-text: 0,0,255!important;
}

.anu-style{
    background-color: blue;
}
[[/module]]

[[include :backrooms-wiki-cn:component:modal start=--
|none-a=0
|open-text=open-text
|title=Title
|animation-type=scale
]]
第一行

第二行

第三行

第四行
[[include :backrooms-wiki-cn:component:modal end=--]]

他看起来就像这样,但仅仅是一个示例,配色并不和谐好看。

Screenshot_20240504_132237_edit_6898373340179.jpg
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License