jquery 实现弹出框打开与关闭

最新推荐文章于 2025-03-12 16:10:16 发布

weixin_33963594

最新推荐文章于 2025-03-12 16:10:16 发布

阅读量544

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/thongyan/p/6639531.html

本文介绍如何使用jQuery实现网页上的弹出窗口功能。首先引入jQuery库，然后通过HTML创建按钮及弹出框的基本结构，并设置相应的样式。最后通过jQuery编写功能代码实现弹窗的显示与关闭。

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

首先，引入jquery文件

<script type="text/javascript" src="js/jquery-1.11.3.js"></script>

第二步：html创建按钮，以及弹出框

按钮

<p id="open111">[打开弹出框]</p>

弹出框（底层滤镜+内容部分+关闭按钮）

<!--底层滤镜-->
<div id="cslj">

　　<!--内容部分-->
　　<div class="qhcq">
   　　 <!--关闭按钮-->
    　　<div class="tcc" id="gbaaa">x</div>
    　　<!--内容-->
    　　<div style="width: 677px; margin: 0px auto;">
    　　 。。。
　　　　</div>

　　</div>

</div>

接下来根据需求设置样式，这里讲下弹出框的样式
滤镜：

position: fixed;//固定定位
left: 0;
top: 0;//距离左边和顶部为0
width: 100%;
height: 100%;//全屏
background: rgba(0,0,0,0.8);//颜色
display: none;//默认隐藏：点击按钮显示

内容：根据自己需求来定

position: fixed;//固定定位

width: 50%;left: 50%;margin-left: -25%;//居中

top: 100px;//距离顶部100px
height: 400px;//高度为400px
background: #fff;//背景颜色


关闭按钮：

position: absolute;//相对于内容部分定位，右上角
top: 0;
right: 0;
width: 50px;
height: 50px;//设置宽高
text-align: center;
line-height: 50px;//居中
font-size: 30px;
cursor:pointer;//鼠标放上去为手
color: #fff;
z-index: 100;

最后一步就是写功能js代码

/*打开弹出框*/
$("#open111").click(function (){
if($("#cslj").css("display")=="none"){
        $("#cslj").show();
    }
});
/*关闭弹出框*/
$("#gbaaa").click(function (){
if($("#cslj").css("display")=="block"){
        $("#cslj").hide();
    }
});