使用jQuery制作模态框

最新推荐文章于 2025-06-03 09:11:33 发布

原创最新推荐文章于 2025-06-03 09:11:33 发布 · 4.9k 阅读

2 ·

CC 4.0 BY-SA版权

前端开发同时被 2 个专栏收录

1 篇文章

订阅专栏

jQuery

1 篇文章

订阅专栏

本文详细介绍了如何利用jQuery创建一个功能齐全的模态框，包括HTML结构的设定、CSS样式的设计以及JavaScript交互逻辑的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<body>
<a href="">点击显示模态框</a>
<div id="cover">
    <div id="cover-bg"></div>
    <div id="cover-content"></div>
</div>
</body>

css

a{
    font-size: 25px;
}
#cover{
    display: none;
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
}
#cover-bg{
    width: 100%;
    height: 100%;
    background-color: #aaa;
    opacity: 0.7;
    -webkit-opacity: 0.7;
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
}
#cover-content{
    background-color: #009900;
    z-index: 8;
    position: absolute;
    top: 40%;
    left: 40%;
}

js

$(function(){
    $("a").click(function(e){
        e.preventDefault();
        $("#cover").css("display","block");
        $("#cover").animate({
            width: "100%",
            height: "100%",
            top: "0",
            left: "0"
        },800);
        $("#cover-content").animate({
            width: "300px",
            height: "300px",
        },800);
    });
    $("#cover-bg").click(function(){
        $("#cover").removeAttr("style");
        $("#cover-content").removeAttr("style");
    });
});