先来张效果图：

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:;
  6.              top:;
  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;}

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

弹出浮层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. Natas Wargame Level 3 Writeup 与 robots.txt

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnsAAAC5CAYAAABQi/kBAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  2. 如何用C#寻找100到999的所有水仙花数？

    首先解释一下何为水仙花数:水仙花数只是自幂数的一种,严格来说是三位数的个位.十位.百位的3次幂数相加等于原来的数字,称为水仙花数.(例如:1^3 + 5^3+ 3^3 = 153) 那么如何通过C#语 ...

  3. JAVA 编程规范

       软件开发技术规范 PTHINK-DEVELOP-JAVA-091010         Java语言编程规范   2009-10-10发布                2009-10-11实施 ...

  4. Eclipse 扩展activiti-desinger 安装

    activiti-desinger 工作流画图工具分为在线安装.离线安装两种方式:下图提供当前所用eclipse版本信息 1.1        在线安装 打开Eclipse -> Help -& ...

  5. 谈一谈JDK8的函数式编程 （一）

    系列之前我想说的   最近有一段时间没写博客了,这几天回到学校,才闲下来,决定写一写最近学习到的只是,既是为了分享,也是为了巩固.之前看到过一篇调查,文章的数据是学习新知识,光是看只能获得大约5%,然 ...

  6. 1254 Flip and Shift

    这题是目的是把黑球和白球分开连续放,事实上只要把其中一种颜色分好在一边就可以,可以绕一个球转即是第n个球可以放在n-2或者n+2上,因为这是个环,所以只需要把黑球或者白球连续放好就可以,当一共有奇数个 ...

  7. 底层算法系列：Paxos算法

    关于算法,面太广.本系列只研究实际应用中遇到的核心算法.了解这些算法和应用,对java码农进阶是很有必要的. 对于Paxos学习论证过程中,证实一句话:有史以来学习paxos最好的地方wiki:Pax ...

  8. 树莓派控制GPIO（Python）

    如果你的raspi没有安装python那么先   sudo apt-get update sudo apt-get install python-dev   例如想要控制35管脚的亮灭: 先建一个文本 ...

  9. Win95+IE3 – Win10+IE11全版本执行漏洞（含POC）

    微软本月安全更新修复了一个潜藏了18年的IE远程代码执行漏洞(CVE-2014-6332),可以说是给windows吃了一颗大补丸.缺陷出现在VBScript的代码中,自Windows 95首次发布( ...

  10. Java常用类之要点总结

    Java常用类之要点总结