先来张效果图：

HTML代码如下：

 <body>

     <div class="bg" id="bg" style="display: none;"></div>

     <div id="popup" style="position:absolute;z-index:100; display:none; background-color:#fff;">

     <div id="close" style="position:absolute; right:10px; top:10px; left:auto; bottom:auto;"><a href="javascript:closeFloat();">[关闭]</a></div><br>

        <h2>title</h2>

        <p>浙江百慕生物科技有限公司隶属浙江丽珀集团，成立于2011年3月，注册资本1000万元，是一家从事海洋生物开发销售的公司，主要旗下的优参堂海参品牌源自于卢炜翎先生创立的优参号参堂，经过一百多年的发展，现已成为最具规模化，现代化，专业化的海参加公司特与世纪联华超市股份有限公司、物美商业集团股份有限公司、天天好大药房等合作，在浙江省多个城市100多家门店进行销售。<br/>此外公司还搭档杭州电视台生活频道《生活大参考》、杭州电视台生活频道电商平台共同进行优参堂海参的销售，致力于将品牌以公司本着“客户至上，质量为本”的原则，建立健全了严苛的质量标准检验体系，除了通过国家食品认证体系之外，还委托国家轻工业食品质量监督检测杭州站特别做了农药、兽药残留检测，海水污染检测，以远远低于国家标准的检测结果确保海参品质。</p>

         <p>浙江百慕生物科技有限公司隶属浙江丽珀集团，成立于2011年3月，注册资本1000万元，是一家从事海洋生物开发销售的公司，主要旗下的优参堂海参品牌源自于卢炜翎先生创立的优参号参堂，经过一百多年的发展，现已成为最具规模化，现代化，专业化的海参加公司特与世纪联华超市股份有限公司、物美商业集团股份有限公司、天天好大药房等合作，在浙江省多个城市100多家门店进行销售。<br/>此外公司还搭档杭州电视台生活频道《生活大参考》、杭州电视台生活频道电商平台共同进行优参堂海参的销售，致力于将品牌以公司本着“客户至上，质量为本”的原则，建立健全了严苛的质量标准检验体系，除了通过国家食品认证体系之外，还委托国家轻工业食品质量监督检测杭州站特别做了农药、兽药残留检测，海水污染检测，以远远低于国家标准的检测结果确保海参品质。</p>

          <p>浙江百慕生物科技有限公司隶属浙江丽珀集团，成立于2011年3月，注册资本1000万元，是一家从事海洋生物开发销售的公司，主要旗下的优参堂海参品牌源自于卢炜翎先生创立的优参号参堂，经过一百多年的发展，现已成为最具规模化，现代化，专业化的海参加公司特与世纪联华超市股份有限公司、物美商业集团股份有限公司、天天好大药房等合作，在浙江省多个城市100多家门店进行销售。<br/>此外公司还搭档杭州电视台生活频道《生活大参考》、杭州电视台生活频道电商平台共同进行优参堂海参的销售，致力于将品牌以公司本着“客户至上，质量为本”的原则，建立健全了严苛的质量标准检验体系，除了通过国家食品认证体系之外，还委托国家轻工业食品质量监督检测杭州站特别做了农药、兽药残留检测，海水污染检测，以远远低于国家标准的检测结果确保海参品质。</p>

     </div>

         <a onClick="javascript:generateFloatLayer()" style="margin:200px auto;display:block;">点击生成浮动层</a>

     </body>

JS代码：

 function generateFloatLayer() {

             floatArea = document.getElementById("popup");

             /*floatArea.style.display = "none";*/

             /*divClose = '<div id="close" style="position:absolute; right:10px; top:10px; left:auto; bottom:auto;"><a href="javascript:closeFloat();">[关闭]</a></div><br>';*/

             x = event.clientX + document.body.scrollLeft;

             y = event.clientY + document.body.scrollTop;

             /*floatArea.innerHTML = divClose + "<div id=\"floatcontent\">some content</div>";*/

             /*floatArea.style.border = "black 1px solid";*/

             /*floatArea.style.left = (document.documentElement.scrollLeft + x - 15) + "px";*/

             floatArea.style.left ="20%";

             <!--floatArea.style.top = (document.documentElement.scrollTop + y - 0) + "px";-->

             floatArea.style.top ="10px";

             floatArea.style.width = "60%";

             floatArea.style.height = "1000px";

             floatArea.style.margin="10px auto";

             floatArea.style.display = "";

             document.getElementById("bg").style.display="";

         }

         function closeFloat() {

             floatArea = document.getElementById("popup");

             /*floatArea.innerHTML = "";*/

             floatArea.style.display = "none";

             document.getElementById("bg").style.display="none";

         }

CSS样式：

 .bg{

             width: 100%;

             height: 100%;

             position: fixed;

             left:;

             top:;

             background-color: #ccc;

             opacity: .6;

         }

         #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;}

         #popup p{text-align:left; font-size:14px;margin-bottom:5px;}

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

弹出浮层css+JQuery的更多相关文章

  1. JS弹出浮层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  3. 鼠标悬浮弹出标题制作JQuery

    今天给客户制作的网站里面加个效果,当鼠标在列表图片之外时,标题不显示,当鼠标悬浮在图片之上时,标题从底部弹出. 效果图如下: 鼠标悬浮前: 鼠标悬浮后: html代码如下: <ul class= ...

  4. 鼠标右键点击弹出菜单（jQuery）

    禁用浏览器默认事件,此处是兼容写法 $(document).contextmenu(function (e) { var event = e || window.event; if (event.pr ...

  5. 弹出ifame页面(jquery.reveal.js)

    <body> <a data-reveal-id="myModalDailyModify" data-animation="fade" tit ...

  6. 网站开发常用jQuery插件总结(二）弹出层插件Lightbox_me

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  7. 网站开发常用jQuery插件总结(二）弹出层插件Lightbox

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  8. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  9. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

随机推荐

  1. 第七篇：数据预处理(四) - 数据归约(PCA/EFA为例)

    前言 这部分也许是数据预处理最为关键的一个阶段. 如何对数据降维是一个很有挑战,很有深度的话题,很多理论书本均有详细深入的讲解分析. 本文仅介绍主成分分析法(PCA)和探索性因子分析法(EFA),并给 ...

  2. CoreCLR源码探索(六) NullReferenceException是如何发生的

    NullReferenceException可能是.Net程序员遇到最多的例外了, 这个例外发生的如此频繁, 以至于人们付出了巨大的努力来使用各种特性和约束试图防止它发生, 但时至今日它仍然让很多程序 ...

  3. 刨根究底字符编码之五——简体汉字编码方案(GB2312、GBK、GB18030、GB13000)以及全角、半角、CJK

    简体汉字编码方案(GB2312.GBK.GB18030.GB13000)以及全角.半角.CJK   一.概述 1. 英文字母再加一些其他标点字符之类的也不会超过256个,用一个字节来表示一个字符就足够 ...

  4. 初识Vue.js

    一 ,什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧 ...

  5. Drools 6.5 Final 入门

    Drools 6.5 Final学习笔记 最近项目中要涉及到使用规则对数据进行操作,想到自己实现一个完整且能灵活满足业务需求的规则系统太难了,就想了解一下有没有开源的规则引擎可以使用,后来发现Droo ...

  6. 移动前端meta

    <!-- 页面描述 --> <meta name="description" content="不超过150个字符"/> <!-- ...

  7. C语言数组之冒泡排序+折半查找法（二分查找）

    冒泡排序算法 将相邻的元素进行两两比较,大的向后"冒", 小的向前"赶". 口诀: N个数字来排队,两两比较小靠前 外层循环N-1(控制需要比较的轮数). 内层 ...

  8. 移动端web解决方案

    范畴 移动端web浏览器.至少需要适配的,UC,QQ,各手机内置浏览器,chrome,safari. 是不是觉得和PC端差不多?错了!每款同一版本ios的内置浏览器一样.但每款同一版本android的 ...

  9. HashSet集合

    HashSet特点 1.无序,不允许重复(无序指元素顺序与添加顺序不一致,每次遍历出来的位置不是恒久不变的) 2.HashSet通过调用hashCode()和equals方法来剔除重复 3.HashS ...

  10. Visual Studio Code 使用心得

    Visual Studio Code 使用心得 最好用的跨平台编辑器,没有之一! 修改编辑器的显示语言 起因:vsCode又升级了(1.13.0),重启之后发现熟悉的中文菜单没有了,而且设置文件 se ...