弹出浮层css+JQuery

先来张效果图：

HTML代码如下：

 1 <body>
 2     <div class="bg" id="bg" style="display: none;"></div>
 3     <div id="popup" style="position:absolute;z-index:100; display:none; background-color:#fff;">
 4     <div id="close" style="position:absolute; right:10px; top:10px; left:auto; bottom:auto;"><a href="javascript:closeFloat();">[关闭]</a></div><br>
 5        <h2>title</h2>
 6        <p>浙江百慕生物科技有限公司隶属浙江丽珀集团，成立于2011年3月，注册资本1000万元，是一家从事海洋生物开发销售的公司，主要旗下的优参堂海参品牌源自于卢炜翎先生创立的优参号参堂，经过一百多年的发展，现已成为最具规模化，现代化，专业化的海参加公司特与世纪联华超市股份有限公司、物美商业集团股份有限公司、天天好大药房等合作，在浙江省多个城市100多家门店进行销售。<br/>此外公司还搭档杭州电视台生活频道《生活大参考》、杭州电视台生活频道电商平台共同进行优参堂海参的销售，致力于将品牌以公司本着“客户至上，质量为本”的原则，建立健全了严苛的质量标准检验体系，除了通过国家食品认证体系之外，还委托国家轻工业食品质量监督检测杭州站特别做了农药、兽药残留检测，海水污染检测，以远远低于国家标准的检测结果确保海参品质。</p>
 7         <p>浙江百慕生物科技有限公司隶属浙江丽珀集团，成立于2011年3月，注册资本1000万元，是一家从事海洋生物开发销售的公司，主要旗下的优参堂海参品牌源自于卢炜翎先生创立的优参号参堂，经过一百多年的发展，现已成为最具规模化，现代化，专业化的海参加公司特与世纪联华超市股份有限公司、物美商业集团股份有限公司、天天好大药房等合作，在浙江省多个城市100多家门店进行销售。<br/>此外公司还搭档杭州电视台生活频道《生活大参考》、杭州电视台生活频道电商平台共同进行优参堂海参的销售，致力于将品牌以公司本着“客户至上，质量为本”的原则，建立健全了严苛的质量标准检验体系，除了通过国家食品认证体系之外，还委托国家轻工业食品质量监督检测杭州站特别做了农药、兽药残留检测，海水污染检测，以远远低于国家标准的检测结果确保海参品质。</p>
 8          <p>浙江百慕生物科技有限公司隶属浙江丽珀集团，成立于2011年3月，注册资本1000万元，是一家从事海洋生物开发销售的公司，主要旗下的优参堂海参品牌源自于卢炜翎先生创立的优参号参堂，经过一百多年的发展，现已成为最具规模化，现代化，专业化的海参加公司特与世纪联华超市股份有限公司、物美商业集团股份有限公司、天天好大药房等合作，在浙江省多个城市100多家门店进行销售。<br/>此外公司还搭档杭州电视台生活频道《生活大参考》、杭州电视台生活频道电商平台共同进行优参堂海参的销售，致力于将品牌以公司本着“客户至上，质量为本”的原则，建立健全了严苛的质量标准检验体系，除了通过国家食品认证体系之外，还委托国家轻工业食品质量监督检测杭州站特别做了农药、兽药残留检测，海水污染检测，以远远低于国家标准的检测结果确保海参品质。</p>
 9     </div>
10         <a onClick="javascript:generateFloatLayer()" style="margin:200px auto;display:block;">点击生成浮动层</a>
11     </body>

JS代码：

 1 function generateFloatLayer() {
 2             floatArea = document.getElementById("popup");
 3             /*floatArea.style.display = "none";*/
 4             /*divClose = '<div id="close" style="position:absolute; right:10px; top:10px; left:auto; bottom:auto;"><a href="javascript:closeFloat();">[关闭]</a></div><br>';*/
 5             x = event.clientX + document.body.scrollLeft;
 6             y = event.clientY + document.body.scrollTop;
 7             /*floatArea.innerHTML = divClose + "<div id=\"floatcontent\">some content</div>";*/
 8             /*floatArea.style.border = "black 1px solid";*/
 9             /*floatArea.style.left = (document.documentElement.scrollLeft + x - 15) + "px";*/
10             floatArea.style.left ="20%";
11             <!--floatArea.style.top = (document.documentElement.scrollTop + y - 0) + "px";-->
12             floatArea.style.top ="10px";
13             floatArea.style.width = "60%";
14             floatArea.style.height = "1000px";
15             floatArea.style.margin="10px auto";
16             floatArea.style.display = "";
17
18             document.getElementById("bg").style.display="";
19         }
20
21         function closeFloat() {
22             floatArea = document.getElementById("popup");
23             /*floatArea.innerHTML = "";*/
24             floatArea.style.display = "none";
25
26             document.getElementById("bg").style.display="none";
27         }

CSS样式：

 1 .bg{
 2             width: 100%;
 3             height: 100%;
 4             position: fixed;
 5             left: 0;
 6             top: 0;
 7             background-color: #ccc;
 8             opacity: .6;
 9         }
10         #popup{ -webkit-box-shadow:0 0 5px 5px rgba(0,0,0,.3); -moz-box-shadow:0 0 5px 5px rgba(0,0,0,.3); box-shadow:0 0 5px 5px rgba(0,0,0,.3);text-align:center;padding:10px 20px;}
11         #popup p{text-align:left; font-size:14px;margin-bottom:5px;}

当点击触发按钮时，弹出浮层，我在浮层四周加了点效果。

转载于:https://www.cnblogs.com/lstory/p/6874107.html

弹出浮层css+JQuery相关推荐

点击输入框弹出文字html,jQuery实现点击文本框弹出热门标签的提示效果
jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 body { font-size:12px;font-family:Arial; } #m_tagsItem { background:# ...
锁定弹出层（jquery语法）
经常遇到要弹出一个悬浮层,鼠标的事件只能在本层上有效,底层会失效.能用的做法是在悬浮层和底层之间在加一个遮盖层,遮盖住整个浏览器,这样就不能点击底层的任何东西了. 遮盖层的定义: var w = M ...
分享一个灰常简单好用的jQuery弹出层插件:jquery.artwl.thickbox.js
最终效果: 插件原理所有弹出层的原理都差不多,就是用一个全屏半透明DIV做遮罩层,在这个遮罩层上再显示出一个层放要显示的内容,其他的就是CSS的运用了. 本插件为了使用简单,把JS跟CSS封装在了一 ...
html 导航右侧弹出层,CSS导航栏及弹窗示例代码
最近整理了CSS导航栏及弹窗,具体如下: CSS导航先来看下效果: Insert your title body{ font-size:12px; } #discuss{ width:990px; ...
html 弹出层插件,jQuery弹出层插件(原创)
插件描述:简约的jQuery弹出层插件更新时间:2020-01-17 23:37:28 更新说明:版本v4.3.0 1.修复最大化可拖动.改变大小的问题 2.去除对于图片的依赖 3.更新拖动插件 4 ...
弹出ifame页面(jquery.reveal.js)
1 <body> 2 <a data-reveal-id="myModalDailyModify" data-animation="fade" ...
j2ee:servlet练习鲜花项目(购物车、分页、ajax、iframe弹出层、jquery、json(计算小计、总计)、map集合高级遍历、图片上传)...
第一:概念购物车全过程的理解: 1.新建一个购物车类,这样,这个类里面就可以封装商品对象和商品数量了. 2.每种商品都是一个购物车 3.把所有的购物车放在一起,也就是放在一个map集合中,这样 ...
html鼠标悬停弹出,纯css实现鼠标滑过弹出层效果
复制代码代码如下: 无标题文档 *{margin:0; padding:0;} /* 所有元素外边距为0 内边距为0 */ /* body中元素字体大小为12px,字体样式为:"Times ...
jquery点击弹出播放视频并显示遮罩层
最近在做视频播放的时候,发现用jquery的播放视频可以很好的实现我所需要的效果.在之前请把插件引用进来,废话不多说,代码如下: <!DOCTYPE html> <html>& ...
html 原生弹出框,html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: 弹出框 hhhhh 取消确认 css部分: #box{ width: 80px; height: 40px; background: #fd7430; border:non ...

弹出浮层css+JQuery

弹出浮层css+JQuery相关推荐

最新文章

热门文章