Jquery点击弹出遮罩层

最新推荐文章于 2021-08-05 12:23:08 发布
最新推荐文章于 2021-08-05 12:23:08 发布
阅读量345 收藏
点赞数 1
文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_3821/article/details/82651574
版权

 

Jquery点击弹出遮罩层

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="../API/jquery-2.1.4.min.js" type="text/javascript"></script>
<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:40%;
        left: 40%;
        width: 20%;
        height: 20%;
        border: 5px 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="点击弹出层" οnclick="ShowDiv('MyDiv','fade')" />
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>
<div id="MyDiv" class="white_content">
    <div style="text-align: right; cursor: default; height: 40px;">
        <span style="font-size: 16px;font-family: 微软雅黑;cursor: pointer" οnclick="CloseDiv('MyDiv','fade')">关闭</span>
    </div>
    目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
</div>

</body>
</html>

 

iteye_3821
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
（美观+实用）jQuery点击弹出步骤遮罩层窗口代码
01-09
jQuery点击弹出步骤遮罩层窗口代码基于jquery.1.7.1.min.js制作，操作窗口，操作步骤代码，点击上一步、下一步显示不同内容。
Jquery简单的弹出层带遮罩插件
09-11
Jquery简单的弹出层带遮罩插件本文由梦三秋于2011年01月07日 23：00作成 jquery代码 $("#test1").click(function(){ $('#login').skygqbox(); }); -------------------------------------------------------------------------------- jquery代码 $("#autoClose").click(function(){ var message = "不好意思呀！我来也匆匆去也匆匆，实在太忙了，有太多的东西要学习了，像Jquery、Jquery插件、Wordpress插件、PHP啦，都要学呀，哥没空老是在这杵着呢!两秒后闪人！别想念哥呀！"; $(message).skygqbox({autoClose:2000}); }); -------------------------------------------------------------------------------- jquery代码 $("#right_top").click(function(){ $('#login').skygqbox({position:"right_top"}); }); -------------------------------------------------------------------------------- jquery代码 $("#right_middle").click(function(){ $('#login').skygqbox({position:"right_middle"}); }); -------------------------------------------------------------------------------- jquery代码 $("#right_bottom").click(function(){ $('#login').skygqbox({position:"right_bottom"}); }); -------------------------------------------------------------------------------- jquery代码 $("#top_middle").click(function(){ $('#login').skygqbox({position:"top_middle"}); }); -------------------------------------------------------------------------------- jquery代码 $("#left_top").click(function(){ $('#login').skygqbox({position:"left_top"}); }); -------------------------------------------------------------------------------- jquery代码 $("#left_middle").click(function(){ $('#login').skygqbox({position:"left_middle"}); }); -------------------------------------------------------------------------------- jquery代码 $("#left_bottom").click(function(){ $('#login').skygqbox({position:"left_bottom"}); }); -------------------------------------------------------------------------------- jquery代码 $("#bottom_middle").click(function(){ $('#login').skygqbox({position:"bottom_middle"}); });
jQuery点击弹出遮罩层（弹出模态框），点击模态框消失
weixin_30813225的博客
01-20 495
<!DOCTYPE html> <html> <head> <title>jQuery弹出层 模态框</title> <script src="./jquery.min.js" type="text/javascript"></script> <style> ...
jquery 弹出遮罩层
蚩尤Love
09-01 501
/* 修改密码是弹出遮罩层 */// url:传递aspx页面// heigth: 弹出页面显示高度// width: 弹出页面显示宽度function frmMaks(url, heigth, width) {    $("body").append(" ");    $("body").append("关 闭  " +    "");    SetCss(heigth,wi
jQuery遮罩效果弹出层效果
WGS.
07-15 452
<br><br> <center><input type="button" id="viewdetailsproductinfo" value="点击弹出层"></center> <div class="overfloat" id="poplayer"> <div class="guize_html"> <span class="guize_html_nei"> <h1>遮罩效果弹出层..
jQuery点击弹出遮罩层图片放大查看代码
12-09
"jQuery点击弹出遮罩层图片放大查看代码"就是解决这个问题的一种常见技术。它利用jQuery库，结合遮罩层（mask）和图片放大功能，使得用户只需点击图片，就能在不离开当前页面的情况下查看更清晰的图片细节。 首先，...
jQuery图片点击弹出遮罩层标记注释特效
12-12
**jQuery图片点击弹出遮罩层标记注释特效详解** jQuery是一个广泛应用于Web开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。在这个项目中，我们讨论的是如何利用jQuery实现一种...
jQuery点击无限弹出遮罩层代码
06-10
本项目涉及的核心知识点是使用jQuery实现点击按钮后无限弹出遮罩层的效果，同时还具备拖动功能，这对于创建对话框、模态窗口或者加载提示等应用场景十分实用。 首先，我们从`index.html`文件开始。这个文件是网页的...
jQuery点击按钮弹出遮罩层且内容居中特效
11-23
这篇文章主要讲解如何使用jQuery实现一个点击按钮后弹出遮罩层，并确保内容居中的特效。在Web开发中，这样的功能经常用于模态对话框或提示信息的展示。 首先，我们来看下HTML结构。HTML部分包括两个`<section>`元素...
jquery弹出关闭遮罩层实例
10-27
在本实例中，我们使用了流行的JavaScript库jquery来实现遮罩层的弹出和关闭。jquery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历和操作、事件处理、动画以及Ajax交互的开发过程。 具体来讲，此...
几个实用的jQuery弹出遮罩层例子
05-17
这是在学习用jQuery弹出遮罩层的过程中，动手实践的几个例子的综合，几个例子简单易懂，具有一定的代表性，希望对初学者有一定的帮助。
jQuery弹出遮罩层效果完整示例
11-25
本文实例讲述了jQuery弹出遮罩层效果。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery 遮罩层<
jQuery实现简单弹窗遮罩效果
10-20
本文主要介绍了jquery实现简单弹窗遮罩效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
js ajax 点击遮罩层,jQuery弹出遮罩层效果完整示例
weixin_29638241的博客
08-05 272
本文实例讲述了jQuery弹出遮罩层效果。分享给大家供大家参考，具体如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">jQuery 遮罩层/* 半透明的遮罩层 */#overlay {background: #000;filter: alpha(opacity=50); /* IE的透明度 */opacity...
简单的jquery点击弹出背景变暗遮罩效果
weixin_34376986的博客
06-24 200
工作中自己写了一个简单的jquery点击弹出背景变暗遮罩效果，非常好用。。。。。。只把关键代码贴出来。并实现了点击空白处隐藏弹出层效果。js代码如下： <scripttype="text/javascript"> $(document).ready(function(){ $(".tkyy").click(function(event){ eve...
jquery弹出层遮罩层点击事件，点击遮罩隐藏弹框
qq_41756580的博客
03-08 3121
html: &lt;div class="submit_page"&gt; &lt;div class="submit_box"&gt; &lt;div class="submit_title"&gt; &lt;span id="title"&gt;&lt;i class="glyphicon glyphicon-envelope&
JQ 遮罩层+弹出窗
七汐 的胡言乱语
05-23 2743
css： #mask-kk{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background: #666; opacity: 0.5; filter: alpha(opacity=50)-moz-opacity...
JQuery弹出层，点击按钮后弹出遮罩层，还有关闭按钮
08-21 2682
&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;jQuery弹出层效果&lt;/title&gt; &lt;meta content="网页特效,特效代码,jQuery,css特效,Js代码" name="keywords&
JQuery弹出窗口插件带透明遮罩层
玩火的稻草人的博客
02-07 1744
今天系统中用到了一个带蒙版的弹出窗口，找了一个JQuery的插件，用起来挺方便的，还不错，mark一下，顺便介绍给大家： 直接上代码吧 1、页面HTML文件 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>简单的jQuery弹出层插......
jQuery点击弹出遮罩层
最新发布
06-06
使用jQuery可以更加方便地实现弹出遮罩层的效果，具体步骤如下： 1. 在HTML文件中引入jQuery库和自定义的CSS文件。...这样就可以使用jQuery实现点击弹出遮罩层的效果，并在遮罩层上添加关闭按钮。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值