无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

jQuery+css+html coverbox前端遮罩层实现详解(图文整理1)

Web开发 Micheal 8个月前 (11-24) 209次浏览 已收录 0个评论 扫描二维码

jQuery+css+html coverbox前端遮罩层实现详解(图文整理1)

jQuery+css+html coverbox前端遮罩层实现详解(图文整理)

下面是详细讲解“jQuery+css+html实现页面遮罩弹出框”的完整攻略:

1. 引入jQuery库文件

<head>标签中引入jQuery库文件,示例代码如下:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. HTML结构

弹出框的HTML结构分为两层,一层是遮罩层,另一层是弹出层。示例代码如下:

<div class="coverBox"></div>
<div class="popBox">
    <h3>这是一个弹出框</h3>
    <p>弹出框的内容</p>
    <button class="closeBtn">关闭</button>
</div>

其中,.coverBox是遮罩层的类名,.popBox是弹出层的类名,closeBtn是关闭按钮的类名。

3. CSS样式

通过CSS样式设置遮罩层和弹出层的样式,示例代码如下:

.coverBox {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 999;
}

.popBox {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 400px;
    border-radius: 5px;
    z-index: 1000;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.closeBtn {
    display: block;
    margin: 20px auto 0;
    padding: 10px 20px;
    background-color: #ccc;
    color: #fff;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.closeBtn:hover {
    background-color: #999;
}

4. JavaScript实现

通过JavaScript实现页面遮罩和弹出框的显示和隐藏。示例代码如下:

<script>
$(function(){
    // 显示弹出框
    $('.popBtn').click(function(){
        $('.coverBox').fadeIn();
        $('.popBox').fadeIn();
    });

    // 隐藏弹出框
    $('.closeBtn').click(function(){
        $('.coverBox').fadeOut();
        $('.popBox').fadeOut();
    });
});
</script>

其中,.popBtn是触发弹出框的按钮类名。

5. 示例说明

示例1:弹出框中显示表单

<div class="coverBox"></div>
<div class="popBox">
    <h3>请填写表单</h3>
    <form>
        <div>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name">
        </div>
        <div>
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email">
        </div>
        <div>
            <label for="tel">电话:</label>
            <input type="tel" id="tel" name="tel">
        </div>
        <button type="submit">提交</button>
    </form>
    <button class="closeBtn">关闭</button>
</div>
<button class="popBtn">显示弹出框</button>

示例2:弹出框中显示图片

<div class="coverBox"></div>
<div class="popBox">
    <h3>这是一张图片</h3>
    <img src="https://picsum.photos/400/300" alt="示例图片">
    <button class="closeBtn">关闭</button>
</div>
<button class="popBtn">显示弹出框</button>

以上就是“jQuery+css+html实现页面遮罩弹出框”的完整攻略。

硬件性能指标 dmips MHz MIPS详解(图文整理1)

喜欢 (0)
[]
分享 (0)
关于作者:
流水不争先,争的是滔滔不绝
发表我的评论
取消评论

评论审核已启用。您的评论可能需要一段时间后才能被显示。

表情 贴图 加粗 删除线 居中 斜体 签到