脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery弹出层

jQuery实现弹出层效果

 更新时间：2019年12月10日 14:46:57   作者：dq_095  
这篇文章主要为大家详细介绍了jQuery实现弹出层效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 {
   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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 瀑布流布局并自动加载实现代码

    瀑布流布局并自动加载实现代码

    Pinterest使用一种新的方式布局取得成功之后，们把他叫做瀑布流，国内现有美丽说，蘑菇街，花瓣等代表的网站接下来为你介绍一个juqery的插件masonry的使用，感兴趣的你可以参考下哈
    2013-03-03
  • 基于jquery实现智能表单验证操作

    基于jquery实现智能表单验证操作

    这篇文章主要为大家详细介绍了基于jquery实现智能表单验证操作的相关资料，利用jquery实现了对一个表单字段格式的即时检查，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • jQuery 表单验证扩展(四)

    jQuery 表单验证扩展(四)

    周末写的 jQuery 表单验证扩展(三) 这篇文章点击率过低，不知道是文章太失水准还是什么其他原因，这里写文章只是为了分享一下自己写代码的心得，
    2010-10-10
  • jQuery实现简单登录条件判断

    jQuery实现简单登录条件判断

    这篇文章主要为大家详细介绍了jQuery实现简单登录条件判断，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • js实现表格筛选功能

    js实现表格筛选功能

    本文主要介绍了js实现表格筛选功能的代码。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • jQuery选择器中的特殊符号处理方法

    jQuery选择器中的特殊符号处理方法

    一般情况下，在jQuery选择器中，我们很少会用到诸如“.”、“#”、“(”、“[”等特殊字符，但是在实际应用中，偶尔也会遇到表达式中含有“#”和“.”等特殊字符,那么是如何处理这些个特殊字符的呢？下面小编给大家介绍下
    2017-09-09
  • 基于JQuery的多标签实现代码

    基于JQuery的多标签实现代码

    最近在学习JQuery，其实也不叫学习，很久以前就学过，只是有一段时间没用，有些生疏了，于是就做几个小例子来练习练习，为了方便以后查找就将这些小示例记录下来
    2012-09-09
  • jQuery Position方法使用和兼容性

    jQuery Position方法使用和兼容性

    position方法获取匹配元素相对父元素的偏移。接下来通过本文给大家分享jQuery Position方法使用和兼容性的相关知识，感兴趣的朋友一起看看吧
    2017-08-08
  • jquery实现无刷新验证码的简单实例

    jquery实现无刷新验证码的简单实例

    下面小编就为大家带来一篇jquery实现无刷新验证码的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • javascript截图 jQuery插件imgAreaSelect使用详解

    javascript截图 jQuery插件imgAreaSelect使用详解

    这篇文章主要介绍了avascript截图 jQuery插件imgAreaSelect使用详解,需要的朋友可以参考下
    2016-05-05

最新评论