jQuery实现 弹出层效果

最新推荐文章于 2024-03-09 21:19:43 发布
最新推荐文章于 2024-03-09 21:19:43 发布
阅读量1.3w 收藏 35
点赞数 7
分类专栏： HTML JavaScript 文章标签： jQuery实现 弹出层效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37968920/article/details/82494555
版权

###jQuery实现 弹出层效果

  • 点击弹出层：弹出弹出层
  • 点击阴影：关闭弹出层
  • 点击“关闭”关闭弹出层

这里写图片描述
这里写图片描述

整体代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery弹出层效果</title>
    <style>
        .black_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1001;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=80);
        }

        .white_content {
            display: none;
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            border: 16px solid lightblue;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }

        .white_content_small {
            display: none;
            position: absolute;
            top: 20%;
            left: 30%;
            width: 40%;
            height: 50%;
            border: 16px solid lightblue;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }
    </style>
    <script type="text/javascript">
        //弹出隐藏层
        function ShowDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'block';
            document.getElementById(bg_div).style.display = 'block';
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
            // bgdiv.style.height = $(document).height();
            $("#" + bg_div).height($(document).height());
        };
        //关闭弹出层
        function CloseDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'none';
            document.getElementById(bg_div).style.display = 'none';
        };
    </script>
</head>

<body>
    <input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
    <!--弹出层时背景层DIV-->
    <div id="fade" class="black_overlay"  onclick="CloseDiv('MyDiv','fade')">
    </div>
    <div id="MyDiv" class="white_content">
        <div style="text-align: right; cursor: default; height: 40px;">
            <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
        </div>
        目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
    </div>
</body>

</html>
dq_095
关注
  • 7
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现弹出层效果
12-13
本文实例为大家分享了jQuery实现弹出层的具体代码，供大家参考，具体内容如下 ###jQuery实现 弹出层效果 点击弹出层：弹出弹出层 点击阴影：关闭弹出层 点击“关闭”关闭弹出层 整体代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery弹出层效果</title> <style> .black_overlay {
基于jQuery弹出层有9种效果
#维多利亚的秘密#
05-29 1100
基于jQuery弹出层有9种效果 触发元素1 示例1：默认弹出层,只须传入触发元素、弹出层、关闭按钮的jquery对象或#ID，其中关闭按钮为可选项。 new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});           ie6下能罩住我吗？          触发元素
JQuery实现删除操作确认弹窗功能
最新发布
m0_57632178的博客
03-09 401
1.弹窗功能可以使jquery中的confirm()函数，基本语法如下。2.1分析如下图所示。2.根据层次关系来获取name值。
JQ实现点击弹出对话框
乐逍遥
08-15 3936
本文实例为大家分享了jq实现界面点击按钮 弹出悬浮框的具体代码，供大家参考，一个是背景，一个是悬浮窗。
jquery简单实现点击弹出层效果实例
weixin_39037804的博客
09-22 775
先看效果图： 完整例子： <!-- 渐变弹出层 --> <div id="race"><a href="#">点击</a></div> <div id="racePop" clas...
jQuery实现简单弹出框
zhengvipin的博客
03-05 7320
jQuery实现Popover效果
jquery实现 弹出层效果
jack_rose_me的博客
04-15 1923
jQuery实现 弹出层效果 点击弹出层：弹出弹出层 点击阴影：关闭弹出层 点击“关闭”关闭弹出层 整体代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery弹...
jQuery之弹出层
The_upside_of_down的博客
09-18 884
大家都知道弹出框，弹出提示、警告用alert、window都可以实现。但是如果让你点击一个事件后，弹出一个小小的界面，而不是一个提示框。我们应该如何实现？在我学习了jquery之后，发现jquery可以实现。但具体过程我还有点模糊，因此学习了别人的代码以及思路。 效果图如下： 通过效果图我们可以看到，第一个界面只有一个简单的点击弹出层的提示按钮，点击后弹出层弹出，...
jQuery弹出层
风的专栏
12-16 726
弹出层往往需要设置浮动样式position:absolute; 考虑到有一种情况,如： 移动到某一个元素上在其下方或者上方显示一个浮动层，作为提示语句，当鼠标移开该元素或者元素的提示层的时候需要隐藏该层，此时可以考虑在该元素外新增一个div或者其它元素，然后将新增的浮动层的html代码通过js加入到新增的div层容器中，此时就只需要考虑当移除该div层的时候才隐藏该层了。 但是此时要考虑该元素的位置显示问题，因为position:absolute;是相对于与它最相近的position:absolute
jquery经典实例之可拖拽的弹出层
编程界明世隐的博客
12-07 380
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>可以拖拽的弹出层</title> <style type="text/css"> #show{ width:100px; height:30px; line-height:30px; margin:0px auto; background-color:yellow; } #show_dia.
jquery实现弹出层效果实例
10-24
主要介绍了jquery实现弹出层效果的方法,实例分析了jQuery实现弹出层的技巧,涉及jQuery操作页面元素与样式的技巧,需要的朋友可以参考下
Jquery实现弹出层效果
02-19
Jquery实现弹出层效果，类似预览图片弹出一个预览图效果，背景色灰色。可以直接运行。代码很简单！
jquery点击按钮打开div弹出层，再次点击任意地方关闭弹出层
qq_22325259的博客
07-16 737
先上效果图 <button type="button" class="blue" id="btnSYWRW" onclick="SYWRW()" style="100px; border:none; color:white;"><span class="iconfont" style="position:relative;top:1px;"></span>&nbsp;首要污染物</button> <%--首要污染物占比饼图..
js实现大图显示
sdaddasd的博客
04-15 2097
[code="java"] New Document $(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 imgShow("#outerdiv", "#inn...
使用Jq实现弹出层
02-27 443
对于前端程序员来说，弹出层是经常用到的，下面我叫大家如何用实现JQuery实现弹出层的效果，代码如下： CSS：弹出层的效果 .mask { position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 1002; lef...
10款jquery弹出层 动画效果应有尽有
zxingchao2009的专栏------用博客记录技术成长的点点滴滴
08-06 1718
1、jquery可拖动弹出层插件点击弹出层插件 jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层插件。 查看演示>>        下载地址 2、jquery弹出层插件点击弹出层可拖动特效 jquery弹出层插件点击按钮背景淡隐淡现显示弹出层，当鼠标滑动标题时，可以拖动整个弹出层，点
jquery 弹出层
weixin_30600197的博客
04-24 83
<style type="text/css"> *{margin:0;padding:0;list-style-type:none;}body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}a,img{border:0;}a{color:#5e5e5e;text-decoration:none;}a:hover{color:#336...
用jQuery实现弹出窗口弹出div层
samruo的博客
01-09 2万+
通过今天的jquery实例学习，我们要达到这样的效果：点击页面的链接，弹出一个div层，同时页面的其他部分变灰并且不能点击；无论是改变浏览器窗口大小还是下拉滚动条，这个弹出层都能始终保持居中；点击页面的关闭按钮，弹出层消失，页面恢复原样。 这里借鉴之前的一篇文章《基于jQuery的固定飘浮层》，使弹出窗口可以始终固定在浏览器的正中间。在这里有一个要点，就是如何使页面的其他地方在弹出窗口的同时
利用 @media screen 实现网页布局的自适应,@media screen and
热门推荐
qq_095的博客
09-05 7万+
利用 @media screen 实现网页布局的自适应,@media screen and 开始研究响应式web设计，CSS3 Media Queries是入门。 Media Queries 其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。 换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。 那么，Media Q...
jQuery点击弹出遮罩层
06-06
使用jQuery可以更加方便地实现弹出遮罩层的效果，具体步骤如下： 1. 在HTML文件中引入jQuery库和自定义的CSS文件。例如： ``` <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值