zoukankan      html  css  js  c++  java
  • 弹出浮层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;}

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

  • 相关阅读:
    白雪公主与七个爷爷——冲刺日志(第二天)
    vba实践
    微信小程序scroll-view不起作用,bindscrolltolower事件无响应
    git bash相关命令
    hexo博客中命令备忘(markdown语法)
    微信聊天记录生成词云图(等日后有机会补充完整)
    微信小程序解决存在图片太大而有效显示区域较小--阿里云oss产生缩略图
    css样式基础库--global.css(持续更新中~)
    Chrome控制台常用技巧
    css基础-动画效果
  • 原文地址:https://www.cnblogs.com/lstory/p/6874107.html
Copyright © 2011-2022 走看看