使用jQuery制作模态框

关注

原创最新推荐文章于 2026-07-08 10:39:23 发布 5k 阅读 AI 写同款· GEO 优化 ›

构建高效轻量级的jQuery模态窗口对话框本文还有配套的精品资源，点击获取简介：本文介绍了一种基于jQuery实现的轻量级模态窗口对话框组件，详细阐述了其在网页开发中的应用、基本概念、AJAX支持以及如何通过选择合适的插件来创建动态内容的对话框。同时，文章也指导开发者如何将资源文件整合到项目中，以实现定制化的模态窗口，并提升用户体验。 1. jQuery在网页开发中的应用 1.1 jQuery简介... 阅读详情

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");
    });
});