【积淀】jQuery写个简单的模态窗口组件

最新推荐文章于 2025-07-07 13:41:48 发布

原创

最新推荐文章于 2025-07-07 13:41:48 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #设计模式 #ui

前言

最近在翻新7月份一个项目的代码，确实感觉现在的水平提升了不止一个档次啊^_ ^，之前花了一个近1500行代码完成的交互效果，现在几百行就搞定，而且不依赖三方的UI组件。我现在的编码有自己的设计模式，像模态这些通用的功能我习惯整理在util模块里，其他模块里如果需要调用new一个对象即可。今天不介绍整个util模块的代码，就拎一个模态组件和大家分享一下，如果觉得不错就拿去用吧。真的很不建议为了实现一个简单的功能去网上下一个重量级的UI组件，而且还不好维护，倒不如自己手写一个。

演示一下效果

myAlert

这里写图片描述

细心的同学会发现这个alert是没有关闭按钮的，为什么呢？因为它是定时关闭的，而且结合淡入淡出的动画体验效果会很好哦。

myConfirm

这里写图片描述

这个就比较常见了，不过这种样式我还是很喜欢的，简洁美，有没有 ^ _ ^

上代码吧

css样式

css样式就70行，大可以直接注释一下打包到你的base.css里。

/*模态窗口*/
.myMask{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0,0,0,0.4);
    background: rgb(0,0,0)\9;
    filter:alpha(opacity=0.4)\9;
    top: 0;
    display: none;
}
.hide{
    display: none;
}
.modal{
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    margin:auto;
    z-index: <